commons-shared-web-ui 0.0.24 → 0.0.26

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

@@ -44,7 +44,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i3 from '@angular/common/http';
 import { HttpHeaders, HttpParams } from '@angular/common/http';
-import { BehaviorSubject, Subject, combineLatest, forkJoin, takeUntil as takeUntil$1, of } from 'rxjs';
+import { Subject, BehaviorSubject, combineLatest, forkJoin, takeUntil as takeUntil$1, of } from 'rxjs';
 import * as i1$4 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { takeUntil, debounceTime, distinctUntilChanged, map, finalize, catchError } from 'rxjs/operators';
@@ -244,6 +244,9 @@ class SmartFormController {
     /** Custom label keys for form actions (Next, Submit, Add, etc.) */
     actionLabels;
     fieldSubjects = new Map();
+    fileAdded$ = new Subject();
+    fileUploadFinished$ = new Subject();
+    fileRemoved$ = new Subject();
     initialize(initialData) {
         this.formData = { ...initialData };
         this.fieldSubjects.forEach((subject, key) => {
@@ -1394,13 +1397,16 @@ class FormFieldComponent {
                 }
                 const placeholder = { mediaType: 'image', url: '', isUploading: true };
                 this._appendMediaItem(placeholder);
+                this.controller.fileAdded$.next(file);
                 const formData = new FormData();
                 formData.append('file', file);
-                if (mediaCfg.entityType)
-                    formData.append('entity_type', mediaCfg.entityType);
                 if (!mediaCfg.uploadUrl)
                     return;
-                this.http.post(mediaCfg.uploadUrl, formData, { headers: this.getHeaders() })
+                let finalUrl = mediaCfg.uploadUrl;
+                if (finalUrl.includes('{fileName}')) {
+                    finalUrl = finalUrl.replace('{fileName}', encodeURIComponent(file.name));
+                }
+                this.http.post(finalUrl, formData, { headers: this.getHeaders() })
                     .pipe(takeUntil(this.destroy$))
                     .subscribe({
                     next: (response) => {
@@ -1419,11 +1425,13 @@ class FormFieldComponent {
                             };
                             this.updateValue(current);
                             this.mediaCarouselIndex = current.length - 1;
+                            this.controller.fileUploadFinished$.next(file);
                         }
                     },
                     error: () => {
                         const cleaned = this.mediaItems.filter(m => m !== placeholder);
                         this.updateValue(cleaned.length ? cleaned : null);
+                        this.controller.fileUploadFinished$.next(file);
                     }
                 });
             });
@@ -1462,12 +1470,14 @@ class FormFieldComponent {
                     ? [...(this.value || []), entry]
                     : [entry];
                 this.updateValue(withPlaceholder);
+                this.controller.fileAdded$.next(file);
                 const formData = new FormData();
                 formData.append('file', file);
-                if (cfg.entityType) {
-                    formData.append('entity_type', cfg.entityType);
+                let finalUrl = cfg.uploadUrl;
+                if (finalUrl.includes('{fileName}')) {
+                    finalUrl = finalUrl.replace('{fileName}', encodeURIComponent(file.name));
                 }
-                this.http.post(cfg.uploadUrl, formData, { headers: this.getHeaders() })
+                this.http.post(finalUrl, formData, { headers: this.getHeaders() })
                     .pipe(takeUntil(this.destroy$))
                     .subscribe({
                     next: (response) => {
@@ -1481,6 +1491,7 @@ class FormFieldComponent {
                             const updatedList = [...current];
                             updatedList[idx] = updatedEntry;
                             this.updateValue(updatedList);
+                            this.controller.fileUploadFinished$.next(file);
                         }
                     },
                     error: () => {
@@ -1489,6 +1500,7 @@ class FormFieldComponent {
                         const cleaned = current.filter(f => f !== entry);
                         this.updateValue(cleaned.length ? cleaned : null);
                         this.fileUploadError = `Failed to upload "${file.name}". Please try again.`;
+                        this.controller.fileUploadFinished$.next(file);
                     }
                 });
             }
@@ -1531,13 +1543,14 @@ class FormFieldComponent {
             }
             if (!deleteUrl.includes('reason=')) {
                 // As requested in the API link, the reason is passed
-                params = params.set('reason', 'DELECTED BY CREATOR');
+                params = params.set('reason', 'DELETED BY CREATOR');
             }
             this.http.delete(deleteUrl, { headers: this.getHeaders(), params })
                 .pipe(takeUntil(this.destroy$))
                 .subscribe({
                 next: () => {
                     removeLocally();
+                    this.controller.fileRemoved$.next(fileToRemove);
                 },
                 error: (err) => {
                     console.error('Failed to delete attachment', err);
@@ -1549,6 +1562,7 @@ class FormFieldComponent {
         }
         else {
             removeLocally();
+            this.controller.fileRemoved$.next(fileToRemove);
         }
     }
     getFileIcon(mimeType) {
@@ -1883,7 +1897,10 @@ class FormFieldComponent {
             this.http.delete(deleteUrl, { headers: this.getHeaders(), params })
                 .pipe(takeUntil(this.destroy$))
                 .subscribe({
-                next: () => removeLocally(),
+                next: () => {
+                    removeLocally();
+                    this.controller.fileRemoved$.next(item);
+                },
                 error: (err) => {
                     console.error('Failed to delete media attachment', err);
                     item.isUploading = false;
@@ -1894,6 +1911,7 @@ class FormFieldComponent {
         else {
             // ── No id or no deleteUrl: remove locally, no API call ───────────────
             removeLocally();
+            this.controller.fileRemoved$.next(item);
         }
     }
     _appendMediaItem(item) {
@@ -2298,6 +2316,8 @@ class SmartFormComponent {
      */
     labels = {};
     mode = 'CREATE';
+    /** When true, all form fields are disabled and the action bar is hidden (preview/read-only mode). */
+    readOnly = false;
     submit = new EventEmitter();
     draftSave = new EventEmitter();
     /**
@@ -2307,6 +2327,9 @@ class SmartFormComponent {
      */
     actionClick = new EventEmitter();
     valueChange = new EventEmitter();
+    fileAdded = new EventEmitter();
+    fileUploadFinished = new EventEmitter();
+    fileRemoved = new EventEmitter();
     formSchema;
     formGroup;
     fieldList = [];
@@ -2331,6 +2354,9 @@ class SmartFormComponent {
         else if (this.initialValues) {
             this.controller.initialize(this.initialValues);
         }
+        this.controller.fileAdded$.pipe(takeUntil$1(this.destroy$)).subscribe(file => this.fileAdded.emit(file));
+        this.controller.fileUploadFinished$.pipe(takeUntil$1(this.destroy$)).subscribe(file => this.fileUploadFinished.emit(file));
+        this.controller.fileRemoved$.pipe(takeUntil$1(this.destroy$)).subscribe(file => this.fileRemoved.emit(file));
     }
     loadEditData() {
         const config = this.formSchema.editConfig;
@@ -2395,10 +2421,16 @@ class SmartFormComponent {
     initializeForm() {
         this.formGroup = this.fb.group({});
         this.collectFields(this.fieldList);
-        // Emit value changes to parent
-        this.formGroup.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
-            this.valueChange.emit(this.collectFormData());
-        });
+        // In read-only mode, disable all controls so the form acts as a preview
+        if (this.readOnly) {
+            this.formGroup.disable();
+        }
+        // Emit value changes to parent (skipped in read-only mode)
+        if (!this.readOnly) {
+            this.formGroup.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
+                this.valueChange.emit(this.collectFormData());
+            });
+        }
     }
     collectFields(fields) {
         fields.forEach(field => {
@@ -2836,11 +2868,11 @@ class SmartFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: SmartFormController }, { token: ExpressionService }, { token: i3.HttpClient }, { token: SnackbarService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick", valueChange: "valueChange" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartFormComponent, isStandalone: false, selector: "lib-smart-form", inputs: { formJson: "formJson", initialValues: "initialValues", enableDraftAutoSave: "enableDraftAutoSave", labels: "labels", mode: "mode", readOnly: "readOnly" }, outputs: { submit: "submit", draftSave: "draftSave", actionClick: "actionClick", valueChange: "valueChange", fileAdded: "fileAdded", fileUploadFinished: "fileUploadFinished", fileRemoved: "fileRemoved" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\" [class.smart-form-wrapper--readonly]=\"readOnly\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormSectionComponent, selector: "lib-form-section", inputs: ["config", "controller", "formGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
+            args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n  <div class=\"smart-form-wrapper\" *ngIf=\"formSchema\" [class.smart-form-wrapper--readonly]=\"readOnly\">\r\n\r\n    <!-- Form Header -->\r\n    <div class=\"form-header\" *ngIf=\"formSchema.showTitle !== false\">\r\n      <h2 class=\"form-title\">{{ formSchema.label }}</h2>\r\n      <p class=\"form-description\" *ngIf=\"formSchema.description\">{{ formSchema.description }}</p>\r\n    </div>\r\n\r\n    <!-- Stepper Navigation -->\r\n    <div class=\"stepper-nav\" *ngIf=\"isStepper && formSchema.stepperConfig?.showStep !== false\">\r\n      <div class=\"stepper-steps\" [class.horizontal]=\"formSchema.stepperConfig?.isHorizontal !== false\">\r\n        <div *ngFor=\"let step of fieldList; let i = index\" class=\"stepper-step\" [class.active]=\"i === currentStep\"\r\n          [class.completed]=\"i < currentStep\">\r\n          <div class=\"step-number\">{{ i + 1 }}</div>\r\n          <div class=\"step-label\">{{ step.sectionConfig?.label || 'Step ' + (i + 1) }}</div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <form [formGroup]=\"formGroup\" class=\"smart-form\">\r\n      <!-- Section Form -->\r\n      <div *ngIf=\"!isStepper && formSchema.sectionConfig && formSchema.sectionConfig.isEnabled !== false\" class=\"form-section\">\r\n        <lib-form-section [config]=\"formSchema.sectionConfig\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n\r\n      <!-- Stepper Form -->\r\n      <div *ngIf=\"isStepper && currentStepConfig && currentStepConfig.sectionConfig?.isEnabled !== false\" class=\"form-stepper\">\r\n        <lib-form-section [config]=\"currentStepConfig.sectionConfig!\" [controller]=\"controller\" [formGroup]=\"formGroup\">\r\n        </lib-form-section>\r\n      </div>\r\n    </form>\r\n\r\n    <!-- \u2500\u2500 Form Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n    <div class=\"form-actions\" *ngIf=\"formSchema.showActions !== false && !readOnly\">\r\n\r\n      <!-- LEFT GROUP -->\r\n      <div class=\"action-group action-group--left\">\r\n        <!-- Optional: Navigational buttons like 'Previous' for stepper can be explicitly added to config, \r\n             but we'll keep the logic if they are provided in the buttons array via action.kind === 'prev' -->\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('left')\"\r\n          [variant]=\"$any(btn.variant) || 'outline'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n      <!-- RIGHT GROUP -->\r\n      <div class=\"action-group action-group--right\">\r\n        <lib-button\r\n          *ngFor=\"let btn of getButtonsForAlignment('right')\"\r\n          [variant]=\"$any(btn.variant) || 'primary'\"\r\n          [disabled]=\"isButtonDisabled(btn)\"\r\n          (click)=\"handleButtonClick(btn)\">\r\n          {{ getButtonLabel(btn) }}\r\n        </lib-button>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>", styles: [".smart-form-container{width:100%;font-family:var(--cc-sf-font-family, \"Inter\", sans-serif)}.smart-form-wrapper{background:var(--cc-sf-form-bg, #ffffff);border-radius:var(--cc-sf-form-border-radius, 12px);border:var(--cc-sf-form-border, none);box-shadow:var(--cc-sf-form-shadow, 0 1px 3px rgba(0, 0, 0, .06))}.smart-form-wrapper .form-alert-feedback{margin-bottom:1rem}.form-header .form-title{font-size:var(--cc-sf-form-title-size, 1.5rem);font-weight:var(--cc-sf-form-title-weight, 700);color:var(--cc-sf-form-title-color, #111827);margin:0 0 8px;line-height:1.25}.form-header .form-description{font-size:var(--cc-sf-form-desc-size, .875rem);color:var(--cc-sf-form-desc-color, #6B7280);margin:0}.stepper-nav{margin-bottom:32px}.stepper-nav .stepper-steps{display:flex;gap:16px}.stepper-nav .stepper-steps.horizontal{flex-direction:row;justify-content:space-between}.stepper-nav .stepper-steps:not(.horizontal){flex-direction:column}.stepper-nav .stepper-step{display:flex;align-items:center;gap:12px;flex:1;position:relative}.stepper-nav .stepper-step:not(:last-child):after{content:\"\";position:absolute;top:calc(var(--cc-sf-step-number-size, 40px) / 2);left:calc(100% + 8px);width:calc(100% - 40px);height:2px;background:var(--cc-sf-step-connector-color, #E5E7EB);transition:background var(--cc-sf-btn-transition, .2s ease)}.stepper-nav .stepper-step.completed:after{background:var(--cc-sf-step-connector-done, #22C55E)}.stepper-nav .stepper-step .step-number{width:var(--cc-sf-step-number-size, 40px);height:var(--cc-sf-step-number-size, 40px);min-width:var(--cc-sf-step-number-size, 40px);border-radius:50%;background:var(--cc-sf-step-number-bg, #E5E7EB);color:var(--cc-sf-step-number-color, #6B7280);display:flex;align-items:center;justify-content:center;font-size:var(--cc-sf-step-number-font-size, .875rem);font-weight:var(--cc-sf-step-number-weight, 600);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step .step-label{font-size:var(--cc-sf-step-label-size, .875rem);color:var(--cc-sf-step-label-color, #6B7280);font-weight:var(--cc-sf-step-label-weight, 500);transition:var(--cc-sf-btn-transition, all .2s ease)}.stepper-nav .stepper-step.active .step-number{background:var(--cc-sf-step-active-bg, #3B82F6);color:var(--cc-sf-step-active-color, #ffffff)}.stepper-nav .stepper-step.active .step-label{color:var(--cc-sf-step-active-label, #1D4ED8);font-weight:var(--cc-sf-step-active-label-weight, 700)}.stepper-nav .stepper-step.completed .step-number{background:var(--cc-sf-step-done-bg, #22C55E);color:var(--cc-sf-step-done-color, #ffffff)}.smart-form{margin-bottom:24px}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--cc-sf-actions-gap, 12px);padding:var(--cc-sf-actions-padding, 20px 0 0);border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.form-actions .action-group{display:flex;align-items:center;gap:var(--cc-sf-actions-gap, 12px)}.form-actions .action-group--left{justify-content:flex-start}.form-actions .action-group--right{justify-content:flex-end;margin-left:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }, { type: SnackbarService }, { type: i1$4.Router }], propDecorators: { formJson: [{
                 type: Input
             }], initialValues: [{
@@ -2851,6 +2883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], mode: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
             }], submit: [{
                 type: Output
             }], draftSave: [{
@@ -2859,6 +2893,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], valueChange: [{
                 type: Output
+            }], fileAdded: [{
+                type: Output
+            }], fileUploadFinished: [{
+                type: Output
+            }], fileRemoved: [{
+                type: Output
             }] } });
 
 class ButtonModule {
@@ -4156,8 +4196,8 @@ class RadioComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    onRadioChange(event) {
-        this.value = event.target.value;
+    onRadioChange(option) {
+        this.value = option.value;
         this.onChange(this.value);
         this.onTouched();
         this.selectionChange.emit(this.value);
@@ -4165,6 +4205,19 @@ class RadioComponent {
     getStyleValue(value) {
         return value ? `${value}` : undefined;
     }
+    getThemeColor(colorStr) {
+        if (!colorStr)
+            return undefined;
+        const themeColors = {
+            'primary': 'var(--cc-radio-primary-bg, var(--cc-btn-primary-bg, #1A73E8))',
+            'warning': 'var(--cc-radio-warning-bg, var(--cc-btn-warning-bg, #F9C80E))',
+            'danger': 'var(--cc-radio-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
+            'success': 'var(--cc-radio-success-bg, var(--cc-btn-success-bg, #28a745))',
+            'warn': 'var(--cc-radio-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
+            'accent': 'var(--cc-radio-accent-bg, #ff4081)'
+        };
+        return themeColors[colorStr] || colorStr;
+    }
     get wrapperStyles() {
         return {
             '--cc-radio-font-family': this.getStyleValue(this.fontFamily),
@@ -4173,7 +4226,7 @@ class RadioComponent {
             '--cc-radio-label-color': this.getStyleValue(this.labelColor),
             '--cc-radio-size': this.getStyleValue(this.size),
             '--cc-radio-border-radius': this.getStyleValue(this.borderRadius),
-            '--cc-radio-checked-color': this.getStyleValue(this.checkedColor),
+            '--cc-radio-checked-color': this.getStyleValue(this.getThemeColor(this.checkedColor || this.color)),
             '--cc-radio-unchecked-color': this.getStyleValue(this.uncheckedColor),
             '--cc-radio-disabled-color': this.getStyleValue(this.disabledColor),
             '--cc-radio-error-color': this.getStyleValue(this.errorColor),
@@ -4190,7 +4243,7 @@ class RadioComponent {
                 useExisting: forwardRef(() => RadioComponent),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-radio-wrapper\" [ngStyle]=\"wrapperStyles\">\r\n    <label *ngIf=\"label\" class=\"cc-radio-group-label\" [class.disabled]=\"disabled\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ requiredMarker }}</span>\r\n    </label>\r\n\r\n    <div class=\"cc-radio-group\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\"\r\n        role=\"radiogroup\">\r\n\r\n        <label class=\"cc-radio-label\" *ngFor=\"let option of options; let i = index\"\r\n            [class.disabled]=\"disabled || option.disabled\" [class.checked]=\"value === option.value\"\r\n            [class.label-before]=\"labelPosition === 'before'\">\r\n\r\n            <input type=\"radio\" [name]=\"uuid\" [value]=\"option.value\" [checked]=\"value === option.value\"\r\n                [disabled]=\"disabled || option.disabled\" (change)=\"onRadioChange($event)\" class=\"cc-native-radio\"\r\n                [id]=\"uuid + '-' + i\">\r\n\r\n            <span class=\"cc-radio-circle\"></span>\r\n            <span class=\"cc-text\">{{ option.label }}</span>\r\n        </label>\r\n    </div>\r\n</div>", styles: [".cc-radio-wrapper{display:block;width:100%;font-family:var(--cc-radio-font-family, inherit)}.cc-radio-group-label{display:block;font-size:var(--cc-radio-group-label-font-size, 14px);font-weight:var(--cc-radio-group-label-font-weight, 500);color:var(--cc-radio-group-label-color, #202124);margin-bottom:8px}.cc-radio-group{display:flex;gap:var(--cc-radio-group-gap, 12px)}.cc-radio-group.vertical{flex-direction:column}.cc-radio-group.horizontal{flex-direction:row;flex-wrap:wrap}.cc-radio-label{display:flex;align-items:center;cursor:pointer;font-size:var(--cc-radio-font-size, 14px);color:var(--cc-radio-label-color, #202124);-webkit-user-select:none;user-select:none;padding:4px 0}.cc-native-radio{position:absolute;left:-9999px}.cc-radio-circle{width:var(--cc-radio-size, 20px);height:var(--cc-radio-size, 20px);border:2px solid var(--cc-radio-unchecked-color, #5F6368);border-radius:var(--cc-radio-border-radius, 50%);margin-right:8px;flex-shrink:0;position:relative;background:#fff;box-sizing:border-box}.cc-radio-circle:after{content:\"\";width:calc(var(--cc-radio-size, 20px) * .5);height:calc(var(--cc-radio-size, 20px) * .5);background:var(--cc-radio-checked-color, #1A73E8);border-radius:var(--cc-radio-border-radius, 50%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.cc-native-radio:checked+.cc-radio-circle{border-color:var(--cc-radio-checked-color, #1A73E8)}.cc-native-radio:checked+.cc-radio-circle:after{transform:translate(-50%,-50%) scale(1)}.cc-text{line-height:1.5}.cc-radio-label.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-radio-wrapper\" [ngStyle]=\"wrapperStyles\">\r\n    <label *ngIf=\"label\" class=\"cc-radio-group-label\" [class.disabled]=\"disabled\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ requiredMarker }}</span>\r\n    </label>\r\n\r\n    <div class=\"cc-radio-group\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\"\r\n        role=\"radiogroup\">\r\n\r\n        <label class=\"cc-radio-label\" *ngFor=\"let option of options; let i = index\"\r\n            [class.disabled]=\"disabled || option.disabled\" [class.checked]=\"value === option.value\"\r\n            [class.label-before]=\"labelPosition === 'before'\">\r\n\r\n            <input type=\"radio\" [name]=\"uuid\" [value]=\"option.value\" [checked]=\"value === option.value\"\r\n                [disabled]=\"disabled || option.disabled\" (change)=\"onRadioChange(option)\" class=\"cc-native-radio\"\r\n                [id]=\"uuid + '-' + i\">\r\n\r\n            <span class=\"cc-radio-circle\"></span>\r\n            <span class=\"cc-text\">{{ option.label }}</span>\r\n        </label>\r\n    </div>\r\n</div>", styles: [".cc-radio-wrapper{display:block;width:100%;font-family:var(--cc-radio-font-family, inherit)}.cc-radio-group-label{display:block;font-size:var(--cc-radio-group-label-font-size, 14px);font-weight:var(--cc-radio-group-label-font-weight, 500);color:var(--cc-radio-group-label-color, #202124);margin-bottom:8px}.cc-radio-group{display:flex;gap:var(--cc-radio-group-gap, 12px)}.cc-radio-group.vertical{flex-direction:column}.cc-radio-group.horizontal{flex-direction:row;flex-wrap:wrap}.cc-radio-label{display:flex;align-items:center;cursor:pointer;font-size:var(--cc-radio-font-size, 14px);color:var(--cc-radio-label-color, #202124);-webkit-user-select:none;user-select:none;padding:4px 0}.cc-native-radio{position:absolute;left:-9999px}.cc-radio-circle{width:var(--cc-radio-size, 20px);height:var(--cc-radio-size, 20px);border:2px solid var(--cc-radio-unchecked-color, #5F6368);border-radius:var(--cc-radio-border-radius, 50%);margin-right:8px;flex-shrink:0;position:relative;background:#fff;box-sizing:border-box}.cc-radio-circle:after{content:\"\";width:calc(var(--cc-radio-size, 20px) * .5);height:calc(var(--cc-radio-size, 20px) * .5);background:var(--cc-radio-checked-color, #1A73E8);border-radius:var(--cc-radio-border-radius, 50%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.cc-native-radio:checked+.cc-radio-circle{border-color:var(--cc-radio-checked-color, #1A73E8)}.cc-native-radio:checked+.cc-radio-circle:after{transform:translate(-50%,-50%) scale(1)}.cc-text{line-height:1.5}.cc-radio-label.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -4200,7 +4253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             useExisting: forwardRef(() => RadioComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cc-radio-wrapper\" [ngStyle]=\"wrapperStyles\">\r\n    <label *ngIf=\"label\" class=\"cc-radio-group-label\" [class.disabled]=\"disabled\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ requiredMarker }}</span>\r\n    </label>\r\n\r\n    <div class=\"cc-radio-group\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\"\r\n        role=\"radiogroup\">\r\n\r\n        <label class=\"cc-radio-label\" *ngFor=\"let option of options; let i = index\"\r\n            [class.disabled]=\"disabled || option.disabled\" [class.checked]=\"value === option.value\"\r\n            [class.label-before]=\"labelPosition === 'before'\">\r\n\r\n            <input type=\"radio\" [name]=\"uuid\" [value]=\"option.value\" [checked]=\"value === option.value\"\r\n                [disabled]=\"disabled || option.disabled\" (change)=\"onRadioChange($event)\" class=\"cc-native-radio\"\r\n                [id]=\"uuid + '-' + i\">\r\n\r\n            <span class=\"cc-radio-circle\"></span>\r\n            <span class=\"cc-text\">{{ option.label }}</span>\r\n        </label>\r\n    </div>\r\n</div>", styles: [".cc-radio-wrapper{display:block;width:100%;font-family:var(--cc-radio-font-family, inherit)}.cc-radio-group-label{display:block;font-size:var(--cc-radio-group-label-font-size, 14px);font-weight:var(--cc-radio-group-label-font-weight, 500);color:var(--cc-radio-group-label-color, #202124);margin-bottom:8px}.cc-radio-group{display:flex;gap:var(--cc-radio-group-gap, 12px)}.cc-radio-group.vertical{flex-direction:column}.cc-radio-group.horizontal{flex-direction:row;flex-wrap:wrap}.cc-radio-label{display:flex;align-items:center;cursor:pointer;font-size:var(--cc-radio-font-size, 14px);color:var(--cc-radio-label-color, #202124);-webkit-user-select:none;user-select:none;padding:4px 0}.cc-native-radio{position:absolute;left:-9999px}.cc-radio-circle{width:var(--cc-radio-size, 20px);height:var(--cc-radio-size, 20px);border:2px solid var(--cc-radio-unchecked-color, #5F6368);border-radius:var(--cc-radio-border-radius, 50%);margin-right:8px;flex-shrink:0;position:relative;background:#fff;box-sizing:border-box}.cc-radio-circle:after{content:\"\";width:calc(var(--cc-radio-size, 20px) * .5);height:calc(var(--cc-radio-size, 20px) * .5);background:var(--cc-radio-checked-color, #1A73E8);border-radius:var(--cc-radio-border-radius, 50%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.cc-native-radio:checked+.cc-radio-circle{border-color:var(--cc-radio-checked-color, #1A73E8)}.cc-native-radio:checked+.cc-radio-circle:after{transform:translate(-50%,-50%) scale(1)}.cc-text{line-height:1.5}.cc-radio-label.disabled{opacity:.5;cursor:not-allowed}\n"] }]
+                    ], template: "<div class=\"cc-radio-wrapper\" [ngStyle]=\"wrapperStyles\">\r\n    <label *ngIf=\"label\" class=\"cc-radio-group-label\" [class.disabled]=\"disabled\">\r\n        {{ label }}\r\n        <span *ngIf=\"required\" class=\"cc-required\">{{ requiredMarker }}</span>\r\n    </label>\r\n\r\n    <div class=\"cc-radio-group\" [class.horizontal]=\"layout === 'horizontal'\" [class.vertical]=\"layout === 'vertical'\"\r\n        role=\"radiogroup\">\r\n\r\n        <label class=\"cc-radio-label\" *ngFor=\"let option of options; let i = index\"\r\n            [class.disabled]=\"disabled || option.disabled\" [class.checked]=\"value === option.value\"\r\n            [class.label-before]=\"labelPosition === 'before'\">\r\n\r\n            <input type=\"radio\" [name]=\"uuid\" [value]=\"option.value\" [checked]=\"value === option.value\"\r\n                [disabled]=\"disabled || option.disabled\" (change)=\"onRadioChange(option)\" class=\"cc-native-radio\"\r\n                [id]=\"uuid + '-' + i\">\r\n\r\n            <span class=\"cc-radio-circle\"></span>\r\n            <span class=\"cc-text\">{{ option.label }}</span>\r\n        </label>\r\n    </div>\r\n</div>", styles: [".cc-radio-wrapper{display:block;width:100%;font-family:var(--cc-radio-font-family, inherit)}.cc-radio-group-label{display:block;font-size:var(--cc-radio-group-label-font-size, 14px);font-weight:var(--cc-radio-group-label-font-weight, 500);color:var(--cc-radio-group-label-color, #202124);margin-bottom:8px}.cc-radio-group{display:flex;gap:var(--cc-radio-group-gap, 12px)}.cc-radio-group.vertical{flex-direction:column}.cc-radio-group.horizontal{flex-direction:row;flex-wrap:wrap}.cc-radio-label{display:flex;align-items:center;cursor:pointer;font-size:var(--cc-radio-font-size, 14px);color:var(--cc-radio-label-color, #202124);-webkit-user-select:none;user-select:none;padding:4px 0}.cc-native-radio{position:absolute;left:-9999px}.cc-radio-circle{width:var(--cc-radio-size, 20px);height:var(--cc-radio-size, 20px);border:2px solid var(--cc-radio-unchecked-color, #5F6368);border-radius:var(--cc-radio-border-radius, 50%);margin-right:8px;flex-shrink:0;position:relative;background:#fff;box-sizing:border-box}.cc-radio-circle:after{content:\"\";width:calc(var(--cc-radio-size, 20px) * .5);height:calc(var(--cc-radio-size, 20px) * .5);background:var(--cc-radio-checked-color, #1A73E8);border-radius:var(--cc-radio-border-radius, 50%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s}.cc-native-radio:checked+.cc-radio-circle{border-color:var(--cc-radio-checked-color, #1A73E8)}.cc-native-radio:checked+.cc-radio-circle:after{transform:translate(-50%,-50%) scale(1)}.cc-text{line-height:1.5}.cc-radio-label.disabled{opacity:.5;cursor:not-allowed}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], label: [{
@@ -4356,6 +4409,17 @@ class ToggleComponent {
     getStyleValue(value) {
         return value ? `${value}` : undefined;
     }
+    getThemeColor(colorStr) {
+        if (!colorStr)
+            return undefined;
+        const themeColors = {
+            'primary': 'var(--cc-toggle-primary-bg, var(--cc-btn-primary-bg, #1A73E8))',
+            'warning': 'var(--cc-toggle-warning-bg, var(--cc-btn-warning-bg, #F9C80E))',
+            'danger': 'var(--cc-toggle-danger-bg, var(--cc-btn-danger-bg, #dc3545))',
+            'success': 'var(--cc-toggle-success-bg, var(--cc-btn-success-bg, #28a745))'
+        };
+        return themeColors[colorStr] || colorStr;
+    }
     get wrapperStyles() {
         return {
             '--cc-toggle-font-family': this.getStyleValue(this.fontFamily),
@@ -4366,7 +4430,7 @@ class ToggleComponent {
             '--cc-toggle-height': this.getStyleValue(this.toggleHeight),
             '--cc-toggle-gap': this.getStyleValue(this.gap),
             '--cc-toggle-unchecked-bg': this.getStyleValue(this.uncheckedColor),
-            '--cc-toggle-checked-bg': this.getStyleValue(this.checkedColor || this.color),
+            '--cc-toggle-checked-bg': this.getStyleValue(this.getThemeColor(this.checkedColor || this.color)),
             '--cc-toggle-thumb-color': this.getStyleValue(this.thumbColor || this.sliderColor),
             '--cc-toggle-checked-thumb-color': this.getStyleValue(this.checkedThumbColor),
             '--cc-toggle-disabled-color': this.getStyleValue(this.disabledColor)
@@ -5841,26 +5905,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             type: Injectable
         }] });
 
+/** Available field types that users can switch to in the configurator. */
+const SWITCHABLE_FIELD_TYPES = [
+    { label: 'Short Text', value: 'shortText' },
+    { label: 'Long Text', value: 'longText' },
+    { label: 'Email', value: 'email' },
+    { label: 'Phone', value: 'phone' },
+    { label: 'Password', value: 'password' },
+    { label: 'Number (Integer)', value: 'number' },
+    { label: 'Number (Decimal)', value: 'decimal' },
+    { label: 'Date', value: 'date' },
+    { label: 'Time', value: 'time' },
+    { label: 'Date & Time', value: 'dateTime' },
+    { label: 'Dropdown', value: 'dropdown' },
+    { label: 'Multi-Select', value: 'multiSelect' },
+    { label: 'Autocomplete', value: 'autocomplete' },
+    { label: 'Checkbox', value: 'checkbox' },
+    { label: 'Multi-Checkbox', value: 'multiCheckbox' },
+    { label: 'Radio', value: 'radio' },
+    { label: 'Toggle', value: 'toggle' },
+    { label: 'Chips', value: 'chip' },
+    { label: 'Rich Text', value: 'richText' },
+    { label: 'File Upload', value: 'file' },
+    { label: 'Rating', value: 'rating' },
+    { label: 'Location', value: 'location' },
+    { label: 'Formula (Auto)', value: 'generated' },
+];
+/**
+ * Field types that are driven by option configurations (optionConfig).
+ * When `hideToggleForOptionTypes` is true on the field-selection configurator,
+ * these field types will not show the enable/disable toggle — they are
+ * UI element types whose options are pre-filled by the developer.
+ */
+const OPTION_DRIVEN_FIELD_TYPES = new Set([
+    'DROPDOWN',
+    'MULTI_SELECT',
+    'RADIO',
+    'AUTOCOMPLETE',
+    'CHECKBOX',
+    'MULTI_CHECKBOX',
+    'CHIP',
+]);
+
 class SelectionFieldNodeComponent {
     field;
     toggleSelected = new EventEmitter();
+    /**
+     * When true, the enable/disable toggle is hidden for option-driven field types
+     * (DROPDOWN, RADIO, MULTI_SELECT, etc.). These types have their options
+     * pre-configured by the developer and shouldn't be toggled by business users.
+     */
+    hideToggleForOptionTypes = false;
+    get isOptionDrivenType() {
+        return OPTION_DRIVEN_FIELD_TYPES.has((this.field?.fieldConfig?.type ?? '').toUpperCase());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionFieldNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionFieldNodeComponent, isStandalone: false, selector: "lib-selection-field-node", inputs: { field: "field" }, outputs: { toggleSelected: "toggleSelected" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionFieldNodeComponent, isStandalone: false, selector: "lib-selection-field-node", inputs: { field: "field", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleSelected: "toggleSelected" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["config", "labels", "label", "checked", "disabled", "required", "indeterminate", "options", "labelPosition", "color", "borderRadius", "value", "errorMessage", "width", "height", "fontSize", "fontWeight", "labelColor", "labelFontSize", "labelFontWeight", "gap", "fontFamily", "backgroundColor", "borderColor", "borderWidth", "padding", "placeholderColor", "focusBorderColor", "errorColor", "disabledBackgroundColor", "disabledColor", "boxShadow", "size", "checkedColor", "uncheckedColor", "groupLabelColor", "groupLabelFontSize", "groupLabelFontWeight"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionFieldNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-selection-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}\n"] }]
+            args: [{ selector: 'lib-selection-field-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-field\"\r\n  [class.fb-selection-field--selected]=\"field.selected\"\r\n  [class.fb-selection-field--locked]=\"field.isLocked\"\r\n  [class.fb-selection-field--option-type]=\"hideToggleForOptionTypes && isOptionDrivenType\"\r\n>\r\n  <span class=\"fb-selection-field__label\">\r\n    {{ field.fieldConfig.label || field.fieldConfig.name }}\r\n  </span>\r\n\r\n  @if (field.isLocked) {\r\n    <span class=\"fb-selection-field__lock\" title=\"This field is locked\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n        <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n      </svg>\r\n    </span>\r\n  } @else if (hideToggleForOptionTypes && isOptionDrivenType) {\r\n    <!-- Option-driven type: toggle hidden by config, show a badge instead -->\r\n    <span class=\"fb-selection-field__option-badge\" title=\"Options are pre-configured\">\r\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n        stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n        <polyline points=\"12 8 12 12 14 14\"></polyline>\r\n      </svg>\r\n    </span>\r\n  } @else {\r\n    <lib-checkbox\r\n      [checked]=\"field.selected\"\r\n      [disabled]=\"false\"\r\n      (checkedChange)=\"toggleSelected.emit()\"\r\n    />\r\n  }\r\n</div>\r\n", styles: [".fb-selection-field{display:flex;align-items:center;justify-content:space-between;padding:var(--fb-fs-field-padding, 8px 12px);margin-bottom:var(--fb-fs-field-gap, 2px);border-radius:var(--fb-fs-field-radius, 6px);background:var(--fb-fs-field-bg, #ffffff);border:1px solid var(--fb-fs-field-border, #e5e7eb);transition:all .15s}.fb-selection-field:hover:not(.fb-selection-field--locked):not(.fb-selection-field--option-type){border-color:var(--fb-fs-field-hover-border, #3b82f6);background:var(--fb-fs-field-hover-bg, #f8fafc)}.fb-selection-field--selected{background:var(--fb-fs-field-selected-bg, #eff6ff);border-color:var(--fb-fs-field-selected-border, #bfdbfe)}.fb-selection-field--locked{background:var(--fb-fs-field-locked-bg, #f3f4f6);cursor:not-allowed}.fb-selection-field--locked .fb-selection-field__label{color:var(--fb-fs-field-locked-color, #6b7280);font-weight:500}.fb-selection-field--option-type{background:var(--fb-fs-field-option-type-bg, #f9fafb);border-color:var(--fb-fs-field-option-type-border, #e5e7eb);cursor:default}.fb-selection-field--option-type .fb-selection-field__label{color:var(--fb-fs-field-option-type-color, #374151)}.fb-selection-field__label{font-size:var(--fb-fs-field-label-size, 13px);color:var(--fb-fs-field-label-color, #111827);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-field__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-field__option-badge{display:flex;align-items:center;color:var(--fb-fs-option-badge-color, #9ca3af);padding:2px;flex-shrink:0}\n"] }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
             }], toggleSelected: [{
                 type: Output
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }] } });
 
 class SelectionSectionNodeComponent {
     section;
     sectionIndex;
     depth = 0;
+    /** Propagated from FieldSelectionComponent — see SelectionFieldNodeComponent for details. */
+    hideToggleForOptionTypes = false;
     /** Emits the sub-path from this node downward (empty [] for self) */
     toggleEnabled = new EventEmitter();
     toggleExpanded = new EventEmitter();
@@ -5899,11 +6018,11 @@ class SelectionSectionNodeComponent {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionSectionNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionSectionNodeComponent, isStandalone: false, selector: "lib-selection-section-node", inputs: { section: "section", sectionIndex: "sectionIndex", depth: "depth" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded && section.enabled) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}.fb-selection-section--disabled{opacity:.55}.fb-selection-section--disabled .fb-selection-section__body{pointer-events:none}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }, { kind: "component", type: SelectionFieldNodeComponent, selector: "lib-selection-field-node", inputs: ["field"], outputs: ["toggleSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: SelectionSectionNodeComponent, isStandalone: false, selector: "lib-selection-section-node", inputs: { section: "section", sectionIndex: "sectionIndex", depth: "depth", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded && section.enabled) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}.fb-selection-section--disabled{opacity:.55}.fb-selection-section--disabled .fb-selection-section__body{pointer-events:none}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth", "hideToggleForOptionTypes"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }, { kind: "component", type: SelectionFieldNodeComponent, selector: "lib-selection-field-node", inputs: ["field", "hideToggleForOptionTypes"], outputs: ["toggleSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SelectionSectionNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-selection-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded && section.enabled) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}.fb-selection-section--disabled{opacity:.55}.fb-selection-section--disabled .fb-selection-section__body{pointer-events:none}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}\n"] }]
+            args: [{ selector: 'lib-selection-section-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fb-selection-section\"\r\n  [class.fb-selection-section--disabled]=\"!section.enabled\"\r\n  [class.fb-selection-section--nested]=\"depth > 0\"\r\n>\r\n  <div class=\"fb-selection-section__header\">\r\n    <button\r\n      class=\"fb-selection-section__expand-btn\"\r\n      (click)=\"onToggleExpanded()\"\r\n      [attr.aria-expanded]=\"section.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-selection-section__chevron\"\r\n        [class.fb-selection-section__chevron--open]=\"section.expanded\"\r\n        width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-selection-section__meta\">\r\n      <span class=\"fb-selection-section__label\">{{ section.label }}</span>\r\n    </div>\r\n\r\n    @if (isLocked) {\r\n      <span class=\"fb-selection-section__lock\" title=\"This section is locked\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect>\r\n          <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\r\n        </svg>\r\n      </span>\r\n    } @else {\r\n      <lib-toggle\r\n        [checked]=\"section.enabled\"\r\n        [disabled]=\"false\"\r\n        [attr.aria-label]=\"'Enable ' + section.label\"\r\n        (toggleChange)=\"onToggleEnabled()\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (section.expanded && section.enabled) {\r\n    <div class=\"fb-selection-section__body\">\r\n      @for (field of section.fields; track trackByFieldIndex($index); let fi = $index) {\r\n        <lib-selection-field-node\r\n          [field]=\"field\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleSelected)=\"onFieldToggle(fi)\"\r\n        />\r\n      }\r\n\r\n      @for (sub of section.subsections; track trackBySubsectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"sub\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"depth + 1\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSubsectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSubsectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onSubsectionFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-selection-section{border:1px solid var(--fb-fs-section-border, #e5e7eb);border-radius:var(--fb-fs-section-radius, 10px);background:var(--fb-fs-section-bg, #ffffff);overflow:hidden}.fb-selection-section--disabled{opacity:.55}.fb-selection-section--disabled .fb-selection-section__body{pointer-events:none}.fb-selection-section--nested{border-color:var(--fb-fs-section-nested-border, #f3f4f6);background:var(--fb-fs-section-nested-bg, #fafafa)}.fb-selection-section__header{display:flex;align-items:center;gap:8px;padding:var(--fb-fs-section-header-padding, 10px 14px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-selection-section__header:hover{background:var(--fb-fs-section-header-hover, #f9fafb)}.fb-selection-section__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-selection-section__chevron{transition:transform .2s}.fb-selection-section__chevron--open{transform:rotate(180deg)}.fb-selection-section__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-selection-section__label{font-size:var(--fb-fs-section-label-size, 13px);font-weight:600;color:var(--fb-fs-section-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-selection-section__lock{display:flex;color:var(--fb-fs-lock-color, #9ca3af);padding:2px}.fb-selection-section__body{padding:var(--fb-fs-section-body-padding, 4px 14px 14px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-field-gap, 6px)}\n"] }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5912,6 +6031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: [{ required: true }]
             }], depth: [{
                 type: Input
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }], toggleEnabled: [{
                 type: Output
             }], toggleExpanded: [{
@@ -5923,6 +6044,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class GroupNodeComponent {
     group;
     groupIndex;
+    /** Propagated from FieldSelectionComponent — see SelectionFieldNodeComponent for details. */
+    hideToggleForOptionTypes = false;
     toggleEnabled = new EventEmitter();
     toggleExpanded = new EventEmitter();
     sectionToggleEnabled = new EventEmitter();
@@ -5944,17 +6067,19 @@ class GroupNodeComponent {
         return index;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GroupNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GroupNodeComponent, isStandalone: false, selector: "lib-group-node", inputs: { group: "group", groupIndex: "groupIndex" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", sectionToggleEnabled: "sectionToggleEnabled", sectionToggleExpanded: "sectionToggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div class=\"fb-group-node\" [class.fb-group-node--disabled]=\"!group.enabled\">\r\n  <div class=\"fb-group-node__header\">\r\n    <button\r\n      class=\"fb-group-node__expand-btn\"\r\n      (click)=\"toggleExpanded.emit()\"\r\n      [attr.aria-expanded]=\"group.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-group-node__chevron\"\r\n        [class.fb-group-node__chevron--open]=\"group.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-group-node__meta\">\r\n      <span class=\"fb-group-node__label\">{{ group.label }}</span>\r\n    </div>\r\n\r\n    <lib-toggle\r\n      [checked]=\"group.enabled\"\r\n      [disabled]=\"false\"\r\n      [attr.aria-label]=\"'Enable ' + group.label\"\r\n      (toggleChange)=\"toggleEnabled.emit()\"\r\n    />\r\n  </div>\r\n\r\n  @if (group.expanded && group.enabled) {\r\n    <div class=\"fb-group-node__body\">\r\n      @for (section of group.sections; track trackBySectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"section\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"0\"\r\n          (toggleEnabled)=\"onSectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-group-node{border:1px solid var(--fb-fs-group-border, #e5e7eb);border-radius:var(--fb-fs-group-radius, 12px);background:var(--fb-fs-group-bg, #ffffff);overflow:hidden}.fb-group-node--disabled{opacity:.6}.fb-group-node--disabled .fb-group-node__body{pointer-events:none}.fb-group-node__header{display:flex;align-items:center;gap:var(--fb-fs-header-gap, 10px);padding:var(--fb-fs-header-padding, 14px 16px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-group-node__header:hover{background:var(--fb-fs-header-hover-bg, #f9fafb)}.fb-group-node__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-group-node__chevron{transition:transform .2s}.fb-group-node__chevron--open{transform:rotate(180deg)}.fb-group-node__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-group-node__label{font-size:var(--fb-fs-group-label-size, 14px);font-weight:700;color:var(--fb-fs-group-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-group-node__body{padding:var(--fb-fs-body-padding, 0 16px 16px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-section-gap, 12px)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: GroupNodeComponent, isStandalone: false, selector: "lib-group-node", inputs: { group: "group", groupIndex: "groupIndex", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { toggleEnabled: "toggleEnabled", toggleExpanded: "toggleExpanded", sectionToggleEnabled: "sectionToggleEnabled", sectionToggleExpanded: "sectionToggleExpanded", fieldToggle: "fieldToggle" }, ngImport: i0, template: "<div class=\"fb-group-node\" [class.fb-group-node--disabled]=\"!group.enabled\">\r\n  <div class=\"fb-group-node__header\">\r\n    <button\r\n      class=\"fb-group-node__expand-btn\"\r\n      (click)=\"toggleExpanded.emit()\"\r\n      [attr.aria-expanded]=\"group.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-group-node__chevron\"\r\n        [class.fb-group-node__chevron--open]=\"group.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-group-node__meta\">\r\n      <span class=\"fb-group-node__label\">{{ group.label }}</span>\r\n    </div>\r\n\r\n    <lib-toggle\r\n      [checked]=\"group.enabled\"\r\n      [disabled]=\"false\"\r\n      [attr.aria-label]=\"'Enable ' + group.label\"\r\n      (toggleChange)=\"toggleEnabled.emit()\"\r\n    />\r\n  </div>\r\n\r\n  @if (group.expanded && group.enabled) {\r\n    <div class=\"fb-group-node__body\">\r\n      @for (section of group.sections; track trackBySectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"section\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"0\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-group-node{border:1px solid var(--fb-fs-group-border, #e5e7eb);border-radius:var(--fb-fs-group-radius, 12px);background:var(--fb-fs-group-bg, #ffffff);overflow:hidden}.fb-group-node--disabled{opacity:.6}.fb-group-node--disabled .fb-group-node__body{pointer-events:none}.fb-group-node__header{display:flex;align-items:center;gap:var(--fb-fs-header-gap, 10px);padding:var(--fb-fs-header-padding, 14px 16px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-group-node__header:hover{background:var(--fb-fs-header-hover-bg, #f9fafb)}.fb-group-node__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-group-node__chevron{transition:transform .2s}.fb-group-node__chevron--open{transform:rotate(180deg)}.fb-group-node__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-group-node__label{font-size:var(--fb-fs-group-label-size, 14px);font-weight:700;color:var(--fb-fs-group-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-group-node__body{padding:var(--fb-fs-body-padding, 0 16px 16px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-section-gap, 12px)}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["config", "labels", "label", "checked", "disabled", "required", "labelPosition", "color", "labelColor", "uncheckedColor", "checkedColor", "thumbColor", "checkedThumbColor", "fontSize", "fontWeight", "fontFamily", "toggleWidth", "toggleHeight", "gap", "sliderColor", "labelFontSize", "labelFontWeight", "disabledColor"], outputs: ["toggleChange"] }, { kind: "component", type: SelectionSectionNodeComponent, selector: "lib-selection-section-node", inputs: ["section", "sectionIndex", "depth", "hideToggleForOptionTypes"], outputs: ["toggleEnabled", "toggleExpanded", "fieldToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GroupNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-group-node\" [class.fb-group-node--disabled]=\"!group.enabled\">\r\n  <div class=\"fb-group-node__header\">\r\n    <button\r\n      class=\"fb-group-node__expand-btn\"\r\n      (click)=\"toggleExpanded.emit()\"\r\n      [attr.aria-expanded]=\"group.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-group-node__chevron\"\r\n        [class.fb-group-node__chevron--open]=\"group.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-group-node__meta\">\r\n      <span class=\"fb-group-node__label\">{{ group.label }}</span>\r\n    </div>\r\n\r\n    <lib-toggle\r\n      [checked]=\"group.enabled\"\r\n      [disabled]=\"false\"\r\n      [attr.aria-label]=\"'Enable ' + group.label\"\r\n      (toggleChange)=\"toggleEnabled.emit()\"\r\n    />\r\n  </div>\r\n\r\n  @if (group.expanded && group.enabled) {\r\n    <div class=\"fb-group-node__body\">\r\n      @for (section of group.sections; track trackBySectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"section\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"0\"\r\n          (toggleEnabled)=\"onSectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-group-node{border:1px solid var(--fb-fs-group-border, #e5e7eb);border-radius:var(--fb-fs-group-radius, 12px);background:var(--fb-fs-group-bg, #ffffff);overflow:hidden}.fb-group-node--disabled{opacity:.6}.fb-group-node--disabled .fb-group-node__body{pointer-events:none}.fb-group-node__header{display:flex;align-items:center;gap:var(--fb-fs-header-gap, 10px);padding:var(--fb-fs-header-padding, 14px 16px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-group-node__header:hover{background:var(--fb-fs-header-hover-bg, #f9fafb)}.fb-group-node__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-group-node__chevron{transition:transform .2s}.fb-group-node__chevron--open{transform:rotate(180deg)}.fb-group-node__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-group-node__label{font-size:var(--fb-fs-group-label-size, 14px);font-weight:700;color:var(--fb-fs-group-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-group-node__body{padding:var(--fb-fs-body-padding, 0 16px 16px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-section-gap, 12px)}\n"] }]
+            args: [{ selector: 'lib-group-node', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-group-node\" [class.fb-group-node--disabled]=\"!group.enabled\">\r\n  <div class=\"fb-group-node__header\">\r\n    <button\r\n      class=\"fb-group-node__expand-btn\"\r\n      (click)=\"toggleExpanded.emit()\"\r\n      [attr.aria-expanded]=\"group.expanded\"\r\n      type=\"button\"\r\n    >\r\n      <svg\r\n        class=\"fb-group-node__chevron\"\r\n        [class.fb-group-node__chevron--open]=\"group.expanded\"\r\n        width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"\r\n      >\r\n        <polyline points=\"6 9 12 15 18 9\" stroke=\"currentColor\" stroke-width=\"2\"\r\n          stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </button>\r\n\r\n    <div class=\"fb-group-node__meta\">\r\n      <span class=\"fb-group-node__label\">{{ group.label }}</span>\r\n    </div>\r\n\r\n    <lib-toggle\r\n      [checked]=\"group.enabled\"\r\n      [disabled]=\"false\"\r\n      [attr.aria-label]=\"'Enable ' + group.label\"\r\n      (toggleChange)=\"toggleEnabled.emit()\"\r\n    />\r\n  </div>\r\n\r\n  @if (group.expanded && group.enabled) {\r\n    <div class=\"fb-group-node__body\">\r\n      @for (section of group.sections; track trackBySectionIndex($index); let si = $index) {\r\n        <lib-selection-section-node\r\n          [section]=\"section\"\r\n          [sectionIndex]=\"si\"\r\n          [depth]=\"0\"\r\n          [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n          (toggleEnabled)=\"onSectionToggleEnabled(si, $event)\"\r\n          (toggleExpanded)=\"onSectionToggleExpanded(si, $event)\"\r\n          (fieldToggle)=\"onFieldToggle(si, $event)\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-group-node{border:1px solid var(--fb-fs-group-border, #e5e7eb);border-radius:var(--fb-fs-group-radius, 12px);background:var(--fb-fs-group-bg, #ffffff);overflow:hidden}.fb-group-node--disabled{opacity:.6}.fb-group-node--disabled .fb-group-node__body{pointer-events:none}.fb-group-node__header{display:flex;align-items:center;gap:var(--fb-fs-header-gap, 10px);padding:var(--fb-fs-header-padding, 14px 16px);cursor:pointer;-webkit-user-select:none;user-select:none}.fb-group-node__header:hover{background:var(--fb-fs-header-hover-bg, #f9fafb)}.fb-group-node__expand-btn{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--fb-fs-chevron-color, #9ca3af);flex-shrink:0}.fb-group-node__chevron{transition:transform .2s}.fb-group-node__chevron--open{transform:rotate(180deg)}.fb-group-node__meta{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.fb-group-node__label{font-size:var(--fb-fs-group-label-size, 14px);font-weight:700;color:var(--fb-fs-group-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-group-node__body{padding:var(--fb-fs-body-padding, 0 16px 16px 28px);display:flex;flex-direction:column;gap:var(--fb-fs-section-gap, 12px)}\n"] }]
         }], propDecorators: { group: [{
                 type: Input,
                 args: [{ required: true }]
             }], groupIndex: [{
                 type: Input,
                 args: [{ required: true }]
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }], toggleEnabled: [{
                 type: Output
             }], toggleExpanded: [{
@@ -5970,6 +6095,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class FieldSelectionComponent {
     schema;
     schemaChange = new EventEmitter();
+    /**
+     * When true, the enable/disable toggle is hidden for option-driven field types
+     * (DROPDOWN, RADIO, MULTI_SELECT, etc.).
+     * Useful for business-user-facing form configurators where developers
+     * pre-fill the option data and these fields should always be included.
+     * Defaults to false (show toggle for all fields).
+     */
+    hideToggleForOptionTypes = false;
     store = inject(FieldSelectionService);
     ngOnChanges(changes) {
         if (changes['schema'] && this.schema) {
@@ -6004,16 +6137,18 @@ class FieldSelectionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FieldSelectionComponent, isStandalone: false, selector: "lib-field-selection", inputs: { schema: "schema" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldSelectionService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-field-selection\">\r\n  @for (group of store.groups(); track trackByGroupIndex($index); let gi = $index) {\r\n    <lib-group-node\r\n      [group]=\"group\"\r\n      [groupIndex]=\"gi\"\r\n      (toggleEnabled)=\"onToggleGroup(gi)\"\r\n      (toggleExpanded)=\"onToggleGroupExpanded(gi)\"\r\n      (sectionToggleEnabled)=\"onToggleSection(gi, $event)\"\r\n      (sectionToggleExpanded)=\"onToggleSectionExpanded(gi, $event)\"\r\n      (fieldToggle)=\"onToggleField(gi, $event.sectionPath, $event.fieldIndex)\"\r\n    />\r\n  }\r\n\r\n  @if (store.groups().length === 0) {\r\n    <div class=\"fb-field-selection__empty\">\r\n      <p>No groups or fields found in the schema.</p>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-field-selection{display:flex;flex-direction:column;gap:var(--fb-fs-group-gap, 16px);padding:var(--fb-fs-padding, 16px);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-field-selection__empty{display:flex;align-items:center;justify-content:center;padding:48px 24px;color:var(--fb-fs-empty-color, #9ca3af);font-size:14px;text-align:center}\n"], dependencies: [{ kind: "component", type: GroupNodeComponent, selector: "lib-group-node", inputs: ["group", "groupIndex"], outputs: ["toggleEnabled", "toggleExpanded", "sectionToggleEnabled", "sectionToggleExpanded", "fieldToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FieldSelectionComponent, isStandalone: false, selector: "lib-field-selection", inputs: { schema: "schema", hideToggleForOptionTypes: "hideToggleForOptionTypes" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldSelectionService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-field-selection\">\r\n  @for (group of store.groups(); track trackByGroupIndex($index); let gi = $index) {\r\n    <lib-group-node\r\n      [group]=\"group\"\r\n      [groupIndex]=\"gi\"\r\n      [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n      (toggleEnabled)=\"onToggleGroup(gi)\"\r\n      (toggleExpanded)=\"onToggleGroupExpanded(gi)\"\r\n      (sectionToggleEnabled)=\"onToggleSection(gi, $event)\"\r\n      (sectionToggleExpanded)=\"onToggleSectionExpanded(gi, $event)\"\r\n      (fieldToggle)=\"onToggleField(gi, $event.sectionPath, $event.fieldIndex)\"\r\n    />\r\n  }\r\n\r\n  @if (store.groups().length === 0) {\r\n    <div class=\"fb-field-selection__empty\">\r\n      <p>No groups or fields found in the schema.</p>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-field-selection{display:flex;flex-direction:column;gap:var(--fb-fs-group-gap, 16px);padding:var(--fb-fs-padding, 16px);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-field-selection__empty{display:flex;align-items:center;justify-content:center;padding:48px 24px;color:var(--fb-fs-empty-color, #9ca3af);font-size:14px;text-align:center}\n"], dependencies: [{ kind: "component", type: GroupNodeComponent, selector: "lib-group-node", inputs: ["group", "groupIndex", "hideToggleForOptionTypes"], outputs: ["toggleEnabled", "toggleExpanded", "sectionToggleEnabled", "sectionToggleExpanded", "fieldToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldSelectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-field-selection', standalone: false, providers: [FieldSelectionService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-field-selection\">\r\n  @for (group of store.groups(); track trackByGroupIndex($index); let gi = $index) {\r\n    <lib-group-node\r\n      [group]=\"group\"\r\n      [groupIndex]=\"gi\"\r\n      (toggleEnabled)=\"onToggleGroup(gi)\"\r\n      (toggleExpanded)=\"onToggleGroupExpanded(gi)\"\r\n      (sectionToggleEnabled)=\"onToggleSection(gi, $event)\"\r\n      (sectionToggleExpanded)=\"onToggleSectionExpanded(gi, $event)\"\r\n      (fieldToggle)=\"onToggleField(gi, $event.sectionPath, $event.fieldIndex)\"\r\n    />\r\n  }\r\n\r\n  @if (store.groups().length === 0) {\r\n    <div class=\"fb-field-selection__empty\">\r\n      <p>No groups or fields found in the schema.</p>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-field-selection{display:flex;flex-direction:column;gap:var(--fb-fs-group-gap, 16px);padding:var(--fb-fs-padding, 16px);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-field-selection__empty{display:flex;align-items:center;justify-content:center;padding:48px 24px;color:var(--fb-fs-empty-color, #9ca3af);font-size:14px;text-align:center}\n"] }]
+            args: [{ selector: 'lib-field-selection', standalone: false, providers: [FieldSelectionService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-field-selection\">\r\n  @for (group of store.groups(); track trackByGroupIndex($index); let gi = $index) {\r\n    <lib-group-node\r\n      [group]=\"group\"\r\n      [groupIndex]=\"gi\"\r\n      [hideToggleForOptionTypes]=\"hideToggleForOptionTypes\"\r\n      (toggleEnabled)=\"onToggleGroup(gi)\"\r\n      (toggleExpanded)=\"onToggleGroupExpanded(gi)\"\r\n      (sectionToggleEnabled)=\"onToggleSection(gi, $event)\"\r\n      (sectionToggleExpanded)=\"onToggleSectionExpanded(gi, $event)\"\r\n      (fieldToggle)=\"onToggleField(gi, $event.sectionPath, $event.fieldIndex)\"\r\n    />\r\n  }\r\n\r\n  @if (store.groups().length === 0) {\r\n    <div class=\"fb-field-selection__empty\">\r\n      <p>No groups or fields found in the schema.</p>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-field-selection{display:flex;flex-direction:column;gap:var(--fb-fs-group-gap, 16px);padding:var(--fb-fs-padding, 16px);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-field-selection__empty{display:flex;align-items:center;justify-content:center;padding:48px 24px;color:var(--fb-fs-empty-color, #9ca3af);font-size:14px;text-align:center}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], schemaChange: [{
                 type: Output
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }] } });
 
 /**
@@ -6244,33 +6379,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 const BUILDER_FIELD_TYPE_SCHEMA_MAP = new InjectionToken('BUILDER_FIELD_TYPE_SCHEMA_MAP');
 
-/** Available field types that users can switch to in the configurator. */
-const SWITCHABLE_FIELD_TYPES = [
-    { label: 'Short Text', value: 'shortText' },
-    { label: 'Long Text', value: 'longText' },
-    { label: 'Email', value: 'email' },
-    { label: 'Phone', value: 'phone' },
-    { label: 'Password', value: 'password' },
-    { label: 'Number (Integer)', value: 'number' },
-    { label: 'Number (Decimal)', value: 'decimal' },
-    { label: 'Date', value: 'date' },
-    { label: 'Time', value: 'time' },
-    { label: 'Date & Time', value: 'dateTime' },
-    { label: 'Dropdown', value: 'dropdown' },
-    { label: 'Multi-Select', value: 'multiSelect' },
-    { label: 'Autocomplete', value: 'autocomplete' },
-    { label: 'Checkbox', value: 'checkbox' },
-    { label: 'Multi-Checkbox', value: 'multiCheckbox' },
-    { label: 'Radio', value: 'radio' },
-    { label: 'Toggle', value: 'toggle' },
-    { label: 'Chips', value: 'chip' },
-    { label: 'Rich Text', value: 'richText' },
-    { label: 'File Upload', value: 'file' },
-    { label: 'Rating', value: 'rating' },
-    { label: 'Location', value: 'location' },
-    { label: 'Formula (Auto)', value: 'generated' },
-];
-
 // ─────────────────────────────────────────────────────────────────────────────
 // SHARED BASE FIELDS (common to ALL field types)
 // These fields come from the core FieldConfig interface.
@@ -6638,6 +6746,12 @@ class ConfiguratorConfigPanelComponent {
     fieldTypeSchemaMap = {};
     configChange = new EventEmitter();
     typeChange = new EventEmitter();
+    /**
+     * When false, all `optionConfig.*` fields (apiUrl, dataPath, labelPath, etc.)
+     * are hidden from the config panel. Business users don't need to configure
+     * option URLs — these are pre-filled by the developer in the master JSON.
+     */
+    showOptionConfig = true;
     /** Exposed to the template for the native type-switcher select */
     switchableFieldTypes = SWITCHABLE_FIELD_TYPES;
     configFormJson = '';
@@ -6706,13 +6820,17 @@ class ConfiguratorConfigPanelComponent {
     _buildConfigFormForType(builderType) {
         if (!this.fieldTypeSchemaMap || !this.selectedField)
             return;
-        const schema = this.fieldTypeSchemaMap[builderType];
+        let schema = this.fieldTypeSchemaMap[builderType];
         if (!schema) {
             this.showConfigForm = false;
             this.configFormJson = '';
             this.cdr.markForCheck();
             return;
         }
+        // When optionConfig should be hidden, filter it out of the schema
+        if (!this.showOptionConfig) {
+            schema = this._filterSchemaForOptionConfig(schema);
+        }
         // 1. Destroy current SmartForm instance
         this.showConfigForm = false;
         this.cdr.detectChanges();
@@ -6725,6 +6843,46 @@ class ConfiguratorConfigPanelComponent {
             this.cdr.detectChanges();
         });
     }
+    /**
+     * Deep-clones the schema and removes any field whose `name` starts with
+     * `optionConfig.` and removes entire sections that become empty after that.
+     */
+    _filterSchemaForOptionConfig(schema) {
+        const isOptionField = (f) => typeof f?.name === 'string' && f.name.startsWith('optionConfig.');
+        const filterChildren = (children) => children
+            .map((child) => {
+            // ROW — filter its inline children
+            if (child.type === 'ROW' && Array.isArray(child.children)) {
+                const filtered = child.children.filter((c) => !isOptionField(c));
+                return filtered.length ? { ...child, children: filtered } : null;
+            }
+            // GROUP / section wrapper — recurse into sectionConfig.children
+            if (child.sectionConfig?.children) {
+                const filteredChildren = filterChildren(child.sectionConfig.children);
+                // Drop the entire section if it becomes empty
+                if (!filteredChildren.length)
+                    return null;
+                return {
+                    ...child,
+                    sectionConfig: { ...child.sectionConfig, children: filteredChildren },
+                };
+            }
+            // Leaf field
+            if (isOptionField(child))
+                return null;
+            return child;
+        })
+            .filter(Boolean);
+        const topChildren = schema.sectionConfig?.children
+            ? filterChildren(schema.sectionConfig.children)
+            : [];
+        return {
+            ...schema,
+            sectionConfig: schema.sectionConfig
+                ? { ...schema.sectionConfig, children: topChildren }
+                : schema.sectionConfig,
+        };
+    }
     // ─── Private: Extract initial values from FieldConfig ─────────────────────
     _extractInitialValuesFromField(field) {
         const v = {};
@@ -6890,11 +7048,11 @@ class ConfiguratorConfigPanelComponent {
         return patch;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorConfigPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorConfigPanelComponent, isStandalone: false, selector: "lib-configurator-config-panel", inputs: { selectedField: "selectedField", selectedFieldInfo: "selectedFieldInfo", builderFieldType: "builderFieldType", fieldTypeSchemaMap: "fieldTypeSchemaMap" }, outputs: { configChange: "configChange", typeChange: "typeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-config-panel\">\r\n  @if (!selectedField) {\r\n    <div class=\"fb-config-panel__empty\">\r\n      <div class=\"fb-config-panel__empty-icon\">\r\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\r\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n          <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\r\n        </svg>\r\n      </div>\r\n      <p class=\"fb-config-panel__empty-text\">\r\n        Select a field from the tree panel to edit its configuration.\r\n      </p>\r\n    </div>\r\n  } @else {\r\n    <div class=\"fb-config-panel__header\">\r\n      <div class=\"fb-config-panel__header-left\">\r\n        <h3 class=\"fb-config-panel__title\">\r\n          {{ selectedField.label || selectedField.name || 'Field Settings' }}\r\n        </h3>\r\n        @if (selectedField.type) {\r\n          <span class=\"fb-config-panel__badge\">{{ selectedField.type }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->\r\n      @if (!isDropdownType) {\r\n        <div class=\"fb-config-panel__type-switcher\">\r\n          <label class=\"fb-config-panel__type-label\" for=\"fb-field-type-select\">Field Type</label>\r\n          <select\r\n            id=\"fb-field-type-select\"\r\n            class=\"fb-config-panel__type-select\"\r\n            [value]=\"currentBuilderType\"\r\n            (change)=\"onTypeSelectChange($event)\"\r\n          >\r\n            @for (opt of switchableFieldTypes; track opt.value) {\r\n              <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"fb-config-panel__form-wrapper\">\r\n      @if (showConfigForm && configFormJson) {\r\n        <div class=\"fb-config-card\">\r\n          <lib-smart-form\r\n            [formJson]=\"configFormJson\"\r\n            [initialValues]=\"configInitialValues\"\r\n            (actionClick)=\"onActionClick($event)\"\r\n          />\r\n        </div>\r\n      } @else if (!showConfigForm) {\r\n        <!-- intentionally empty \u2014 SmartForm is being recycled -->\r\n      } @else {\r\n        <div class=\"fb-config-panel__error\">\r\n          No configuration schema available for this field type.\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-config-panel{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-panel-bg, #f9fafb);overflow:hidden}.fb-config-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-fc-empty-color, #9ca3af);text-align:center;padding:48px}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:20px 32px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;flex-wrap:wrap}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}.fb-config-panel__type-label{font-size:var(--fb-fc-type-label-size, .75rem);font-weight:600;color:var(--fb-fc-type-label-color, #6b7280);white-space:nowrap}.fb-config-panel__type-select{height:var(--fb-fc-type-select-height, 36px);padding:0 32px 0 10px;border:1px solid var(--fb-fc-type-select-border, #d1d5db);border-radius:var(--fb-fc-type-select-radius, 8px);background-color:var(--fb-fc-type-select-bg, #ffffff);color:var(--fb-fc-type-select-color, #111827);font-size:.8125rem;font-weight:500;cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;min-width:160px;transition:border-color .15s ease,box-shadow .15s ease}.fb-config-panel__type-select:hover{border-color:var(--fb-fc-type-select-hover-border, #9ca3af)}.fb-config-panel__type-select:focus{outline:none;border-color:var(--fb-fc-accent, #3b82f6);box-shadow:0 0 0 3px #3b82f61f}.fb-config-panel__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--fb-fc-title-color, #111827)}.fb-config-panel__badge{padding:4px 12px;background:var(--fb-fc-badge-bg, #eff6ff);color:var(--fb-fc-badge-color, #3b82f6);border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--fb-fc-badge-border, #dbeafe)}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;padding:40px}.fb-config-panel__form-wrapper .fb-config-card{background:var(--fb-fc-card-bg, #ffffff);border-radius:12px;border:1px solid var(--fb-fc-card-border, #e5e7eb);padding:40px;box-shadow:0 4px 20px #00000008;max-width:800px;margin:0 auto;--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-form-bg: transparent;--cc-sf-form-padding: 0;--cc-sf-form-border-radius: 12px;--cc-sf-form-border: none;--cc-sf-form-shadow: none;--cc-sf-form-max-width: 1200px;--cc-sf-form-title-size: 1.5rem;--cc-sf-form-title-weight: 700;--cc-sf-form-title-color: #111827;--cc-sf-form-desc-size: .875rem;--cc-sf-form-desc-color: #6B7280;--cc-sf-section-bg: transparent;--cc-sf-section-border: none;--cc-sf-section-radius: 10px;--cc-sf-section-padding: 0;--cc-sf-section-shadow: none;--cc-sf-section-gap: 20px;--cc-sf-section-label-size: 1rem;--cc-sf-section-label-weight: 600;--cc-sf-section-label-color: #1F2937;--cc-sf-section-label-border: 2px solid #E5E7EB;--cc-sf-instance-bg: #F9FAFB;--cc-sf-instance-border: 1px solid #E5E7EB;--cc-sf-instance-radius: 8px;--cc-sf-instance-padding: 16px;--cc-sf-instance-divider: 1px dashed #D1D5DB;--cc-sf-instance-num-color:#4B5563;--cc-sf-instance-num-size: .8125rem;--cc-sf-grid-gap: 24px;--cc-sf-label-size: .8125rem;--cc-sf-label-weight: 600;--cc-sf-label-color: #111827;--cc-sf-label-required-color: #DC2626;--cc-sf-input-bg: #ffffff;--cc-sf-input-color: #111827;--cc-sf-input-placeholder: #9CA3AF;--cc-sf-input-border: 1.5px solid #D1D5DB;--cc-sf-input-radius: 8px;--cc-sf-input-padding: .75rem 1rem;--cc-sf-input-font-size: .875rem;--cc-sf-input-shadow: none;--cc-sf-input-hover-border:#9CA3AF;--cc-sf-input-focus-border:#3B82F6;--cc-sf-input-focus-shadow:0 0 0 3px rgba(59, 130, 246, .12);--cc-sf-input-transition: all .2s ease;--cc-sf-input-disabled-bg: #F3F4F6;--cc-sf-input-disabled-color: #6B7280;--cc-sf-input-disabled-border:#E5E7EB;--cc-sf-error-border: #DC2626;--cc-sf-error-bg: #FEF2F2;--cc-sf-error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, .1);--cc-sf-error-text-color: #DC2626;--cc-sf-error-text-size: .75rem;--cc-sf-hint-color: #6B7280;--cc-sf-hint-size: .75rem;--cc-sf-chip-border: 1px solid #D1D5DB;--cc-sf-chip-radius: 20px;--cc-sf-chip-padding: 6px 14px;--cc-sf-chip-bg: #ffffff;--cc-sf-chip-color: #374151;--cc-sf-chip-hover-bg: #F3F4F6;--cc-sf-chip-selected-bg: #3B82F6;--cc-sf-chip-selected-color: #ffffff;--cc-sf-chip-selected-border:#3B82F6;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-track-on: #3B82F6;--cc-sf-switch-thumb: #ffffff;--cc-sf-star-empty: #D1D5DB;--cc-sf-star-filled: #F59E0B;--cc-sf-star-size: 28px;--cc-sf-generated-bg: #F3F4F6;--cc-sf-generated-border: 1px solid #E5E7EB;--cc-sf-generated-color: #6B7280;--cc-sf-generated-radius: 8px;--cc-sf-generated-padding: .625rem .875rem;--cc-sf-dropzone-bg: #FFFAF1;--cc-sf-dropzone-border: 1.5px dashed #CBD5E1;--cc-sf-dropzone-radius: 12px;--cc-sf-dropzone-hover-bg: #EFF6FF;--cc-sf-dropzone-hover-border: #93C5FD;--cc-sf-dropzone-over-border: #3B82F6;--cc-sf-dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, .12);--cc-sf-dropzone-icon-color: #94A3B8;--cc-sf-dropzone-link-color: #3B82F6;--cc-sf-dropzone-hint-color: #64748B;--cc-sf-uploaded-item-bg: #ffffff;--cc-sf-uploaded-item-border: 1px solid #E2E8F0;--cc-sf-uploaded-item-radius: 8px;--cc-sf-uploaded-remove-color: #94A3B8;--cc-sf-uploaded-remove-hover-bg: #FEF2F2;--cc-sf-uploaded-remove-hover-color: #DC2626;--cc-sf-btn-add-bg: transparent;--cc-sf-btn-add-color: #3B82F6;--cc-sf-btn-add-border: 1px dashed #CBD5E1;--cc-sf-btn-add-radius: 6px;--cc-sf-btn-add-hover-bg: #EFF6FF;--cc-sf-btn-add-hover-border: #BFDBFE;--cc-sf-btn-remove-bg: #FFF5F5;--cc-sf-btn-remove-color: #E53E3E;--cc-sf-btn-remove-border: 1px solid #FED7D7;--cc-sf-btn-remove-radius: 4px;--cc-sf-btn-remove-hover-bg: #FED7D7;--cc-sf-step-connector-color: #E5E7EB;--cc-sf-step-connector-done: #22C55E;--cc-sf-step-number-bg: #E5E7EB;--cc-sf-step-number-color: #6B7280;--cc-sf-step-number-size: 40px;--cc-sf-step-number-font-size: .875rem;--cc-sf-step-number-weight: 600;--cc-sf-step-label-size: .875rem;--cc-sf-step-label-color: #6B7280;--cc-sf-step-label-weight: 500;--cc-sf-step-active-bg: #3B82F6;--cc-sf-step-active-color: #ffffff;--cc-sf-step-active-label: #1D4ED8;--cc-sf-step-active-label-weight: 700;--cc-sf-step-done-bg: #22C55E;--cc-sf-step-done-color: #ffffff;--cc-sf-actions-border: 1px solid #E5E7EB;--cc-sf-actions-padding: 20px 0 0;--cc-sf-actions-gap: 12px;--cc-sf-btn-primary-bg: #3B82F6;--cc-sf-btn-primary-color: #ffffff;--cc-sf-btn-primary-radius: 8px;--cc-sf-btn-primary-padding: .625rem 1.5rem;--cc-sf-btn-primary-hover-bg: #2563EB;--cc-sf-btn-secondary-bg: #F3F4F6;--cc-sf-btn-secondary-color: #374151;--cc-sf-btn-secondary-radius: 8px;--cc-sf-btn-secondary-padding: .625rem 1.5rem;--cc-sf-btn-secondary-hover-bg: #E5E7EB;--cc-sf-btn-font-size: .875rem;--cc-sf-btn-font-weight: 600;--cc-sf-btn-transition: all .2s ease;--cc-sf-btn-disabled-opacity: .55}.fb-config-panel__error{padding:24px;background:var(--fb-fc-error-bg, #fef2f2);color:var(--fb-fc-error-color, #dc2626);border:1px solid var(--fb-fc-error-border, #fee2e2);border-radius:8px;font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "component", type: SmartFormComponent, selector: "lib-smart-form", inputs: ["formJson", "initialValues", "enableDraftAutoSave", "labels", "mode"], outputs: ["submit", "draftSave", "actionClick", "valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorConfigPanelComponent, isStandalone: false, selector: "lib-configurator-config-panel", inputs: { selectedField: "selectedField", selectedFieldInfo: "selectedFieldInfo", builderFieldType: "builderFieldType", fieldTypeSchemaMap: "fieldTypeSchemaMap", showOptionConfig: "showOptionConfig" }, outputs: { configChange: "configChange", typeChange: "typeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-config-panel\">\r\n  @if (!selectedField) {\r\n    <div class=\"fb-config-panel__empty\">\r\n      <div class=\"fb-config-panel__empty-icon\">\r\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\r\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n          <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\r\n        </svg>\r\n      </div>\r\n      <p class=\"fb-config-panel__empty-text\">\r\n        Select a field from the tree panel to edit its configuration.\r\n      </p>\r\n    </div>\r\n  } @else {\r\n    <div class=\"fb-config-panel__header\">\r\n      <div class=\"fb-config-panel__header-left\">\r\n        <h3 class=\"fb-config-panel__title\">\r\n          {{ selectedField.label || selectedField.name || 'Field Settings' }}\r\n        </h3>\r\n        @if (selectedField.type) {\r\n          <span class=\"fb-config-panel__badge\">{{ selectedField.type }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->\r\n      @if (!isDropdownType) {\r\n        <div class=\"fb-config-panel__type-switcher\">\r\n          <label class=\"fb-config-panel__type-label\" for=\"fb-field-type-select\">Field Type</label>\r\n          <select\r\n            id=\"fb-field-type-select\"\r\n            class=\"fb-config-panel__type-select\"\r\n            [value]=\"currentBuilderType\"\r\n            (change)=\"onTypeSelectChange($event)\"\r\n          >\r\n            @for (opt of switchableFieldTypes; track opt.value) {\r\n              <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"fb-config-panel__form-wrapper\">\r\n      @if (showConfigForm && configFormJson) {\r\n        <div class=\"fb-config-card\">\r\n          <lib-smart-form\r\n            [formJson]=\"configFormJson\"\r\n            [initialValues]=\"configInitialValues\"\r\n            (actionClick)=\"onActionClick($event)\"\r\n          />\r\n        </div>\r\n      } @else if (!showConfigForm) {\r\n        <!-- intentionally empty \u2014 SmartForm is being recycled -->\r\n      } @else {\r\n        <div class=\"fb-config-panel__error\">\r\n          No configuration schema available for this field type.\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-config-panel{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-panel-bg, #f9fafb);overflow:hidden}.fb-config-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-fc-empty-color, #9ca3af);text-align:center;padding:48px}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:20px 32px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;flex-wrap:wrap}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}.fb-config-panel__type-label{font-size:var(--fb-fc-type-label-size, .75rem);font-weight:600;color:var(--fb-fc-type-label-color, #6b7280);white-space:nowrap}.fb-config-panel__type-select{height:var(--fb-fc-type-select-height, 36px);padding:0 32px 0 10px;border:1px solid var(--fb-fc-type-select-border, #d1d5db);border-radius:var(--fb-fc-type-select-radius, 8px);background-color:var(--fb-fc-type-select-bg, #ffffff);color:var(--fb-fc-type-select-color, #111827);font-size:.8125rem;font-weight:500;cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;min-width:160px;transition:border-color .15s ease,box-shadow .15s ease}.fb-config-panel__type-select:hover{border-color:var(--fb-fc-type-select-hover-border, #9ca3af)}.fb-config-panel__type-select:focus{outline:none;border-color:var(--fb-fc-accent, #3b82f6);box-shadow:0 0 0 3px #3b82f61f}.fb-config-panel__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--fb-fc-title-color, #111827)}.fb-config-panel__badge{padding:4px 12px;background:var(--fb-fc-badge-bg, #eff6ff);color:var(--fb-fc-badge-color, #3b82f6);border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--fb-fc-badge-border, #dbeafe)}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;padding:20px}.fb-config-panel__form-wrapper .fb-config-card{background:var(--fb-fc-card-bg, #ffffff);border-radius:12px;border:1px solid var(--fb-fc-card-border, #e5e7eb);padding:24px;box-shadow:0 4px 20px #00000008;max-width:800px;margin:0 auto;--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-form-bg: transparent;--cc-sf-form-padding: 0;--cc-sf-form-border-radius: 12px;--cc-sf-form-border: none;--cc-sf-form-shadow: none;--cc-sf-form-max-width: 1200px;--cc-sf-form-title-size: 1.5rem;--cc-sf-form-title-weight: 700;--cc-sf-form-title-color: #111827;--cc-sf-form-desc-size: .875rem;--cc-sf-form-desc-color: #6B7280;--cc-sf-section-bg: transparent;--cc-sf-section-border: none;--cc-sf-section-radius: 10px;--cc-sf-section-padding: 0;--cc-sf-section-shadow: none;--cc-sf-section-gap: 20px;--cc-sf-section-label-size: 1rem;--cc-sf-section-label-weight: 600;--cc-sf-section-label-color: #1F2937;--cc-sf-section-label-border: 2px solid #E5E7EB;--cc-sf-instance-bg: #F9FAFB;--cc-sf-instance-border: 1px solid #E5E7EB;--cc-sf-instance-radius: 8px;--cc-sf-instance-padding: 16px;--cc-sf-instance-divider: 1px dashed #D1D5DB;--cc-sf-instance-num-color:#4B5563;--cc-sf-instance-num-size: .8125rem;--cc-sf-grid-gap: 16px;--cc-sf-label-size: .8125rem;--cc-sf-label-weight: 600;--cc-sf-label-color: #111827;--cc-sf-label-required-color: #DC2626;--cc-sf-input-bg: #ffffff;--cc-sf-input-color: #111827;--cc-sf-input-placeholder: #9CA3AF;--cc-sf-input-border: 1.5px solid #D1D5DB;--cc-sf-input-radius: 8px;--cc-sf-input-padding: .625rem .875rem;--cc-sf-input-font-size: .875rem;--cc-sf-input-shadow: none;--cc-sf-input-hover-border:#9CA3AF;--cc-sf-input-focus-border:#3B82F6;--cc-sf-input-focus-shadow:0 0 0 3px rgba(59, 130, 246, .12);--cc-sf-input-transition: all .2s ease;--cc-sf-input-disabled-bg: #F3F4F6;--cc-sf-input-disabled-color: #6B7280;--cc-sf-input-disabled-border:#E5E7EB;--cc-sf-error-border: #DC2626;--cc-sf-error-bg: #FEF2F2;--cc-sf-error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, .1);--cc-sf-error-text-color: #DC2626;--cc-sf-error-text-size: .75rem;--cc-sf-hint-color: #6B7280;--cc-sf-hint-size: .75rem;--cc-sf-chip-border: 1px solid #D1D5DB;--cc-sf-chip-radius: 20px;--cc-sf-chip-padding: 6px 14px;--cc-sf-chip-bg: #ffffff;--cc-sf-chip-color: #374151;--cc-sf-chip-hover-bg: #F3F4F6;--cc-sf-chip-selected-bg: #3B82F6;--cc-sf-chip-selected-color: #ffffff;--cc-sf-chip-selected-border:#3B82F6;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-track-on: #3B82F6;--cc-sf-switch-thumb: #ffffff;--cc-sf-star-empty: #D1D5DB;--cc-sf-star-filled: #F59E0B;--cc-sf-star-size: 28px;--cc-sf-generated-bg: #F3F4F6;--cc-sf-generated-border: 1px solid #E5E7EB;--cc-sf-generated-color: #6B7280;--cc-sf-generated-radius: 8px;--cc-sf-generated-padding: .625rem .875rem;--cc-sf-dropzone-bg: #FFFAF1;--cc-sf-dropzone-border: 1.5px dashed #CBD5E1;--cc-sf-dropzone-radius: 12px;--cc-sf-dropzone-hover-bg: #EFF6FF;--cc-sf-dropzone-hover-border: #93C5FD;--cc-sf-dropzone-over-border: #3B82F6;--cc-sf-dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, .12);--cc-sf-dropzone-icon-color: #94A3B8;--cc-sf-dropzone-link-color: #3B82F6;--cc-sf-dropzone-hint-color: #64748B;--cc-sf-uploaded-item-bg: #ffffff;--cc-sf-uploaded-item-border: 1px solid #E2E8F0;--cc-sf-uploaded-item-radius: 8px;--cc-sf-uploaded-remove-color: #94A3B8;--cc-sf-uploaded-remove-hover-bg: #FEF2F2;--cc-sf-uploaded-remove-hover-color: #DC2626;--cc-sf-btn-add-bg: transparent;--cc-sf-btn-add-color: #3B82F6;--cc-sf-btn-add-border: 1px dashed #CBD5E1;--cc-sf-btn-add-radius: 6px;--cc-sf-btn-add-hover-bg: #EFF6FF;--cc-sf-btn-add-hover-border: #BFDBFE;--cc-sf-btn-remove-bg: #FFF5F5;--cc-sf-btn-remove-color: #E53E3E;--cc-sf-btn-remove-border: 1px solid #FED7D7;--cc-sf-btn-remove-radius: 4px;--cc-sf-btn-remove-hover-bg: #FED7D7;--cc-sf-step-connector-color: #E5E7EB;--cc-sf-step-connector-done: #22C55E;--cc-sf-step-number-bg: #E5E7EB;--cc-sf-step-number-color: #6B7280;--cc-sf-step-number-size: 40px;--cc-sf-step-number-font-size: .875rem;--cc-sf-step-number-weight: 600;--cc-sf-step-label-size: .875rem;--cc-sf-step-label-color: #6B7280;--cc-sf-step-label-weight: 500;--cc-sf-step-active-bg: #3B82F6;--cc-sf-step-active-color: #ffffff;--cc-sf-step-active-label: #1D4ED8;--cc-sf-step-active-label-weight: 700;--cc-sf-step-done-bg: #22C55E;--cc-sf-step-done-color: #ffffff;--cc-sf-actions-border: 1px solid #E5E7EB;--cc-sf-actions-padding: 20px 0 0;--cc-sf-actions-gap: 12px;--cc-sf-btn-primary-bg: #3B82F6;--cc-sf-btn-primary-color: #ffffff;--cc-sf-btn-primary-radius: 8px;--cc-sf-btn-primary-padding: .625rem 1.5rem;--cc-sf-btn-primary-hover-bg: #2563EB;--cc-sf-btn-secondary-bg: #F3F4F6;--cc-sf-btn-secondary-color: #374151;--cc-sf-btn-secondary-radius: 8px;--cc-sf-btn-secondary-padding: .625rem 1.5rem;--cc-sf-btn-secondary-hover-bg: #E5E7EB;--cc-sf-btn-font-size: .875rem;--cc-sf-btn-font-weight: 600;--cc-sf-btn-transition: all .2s ease;--cc-sf-btn-disabled-opacity: .55}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.75rem;font-weight:600;margin:0;flex-shrink:1;min-width:0;word-break:keep-all}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .switch,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .switch{flex-shrink:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{flex-wrap:wrap;gap:12px 16px}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>*{flex:1;min-width:100px}.fb-config-panel__error{padding:24px;background:var(--fb-fc-error-bg, #fef2f2);color:var(--fb-fc-error-color, #dc2626);border:1px solid var(--fb-fc-error-border, #fee2e2);border-radius:8px;font-size:14px;font-weight:500}\n"], dependencies: [{ kind: "component", type: SmartFormComponent, selector: "lib-smart-form", inputs: ["formJson", "initialValues", "enableDraftAutoSave", "labels", "mode", "readOnly"], outputs: ["submit", "draftSave", "actionClick", "valueChange", "fileAdded", "fileUploadFinished", "fileRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorConfigPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurator-config-panel', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-config-panel\">\r\n  @if (!selectedField) {\r\n    <div class=\"fb-config-panel__empty\">\r\n      <div class=\"fb-config-panel__empty-icon\">\r\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\r\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n          <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\r\n        </svg>\r\n      </div>\r\n      <p class=\"fb-config-panel__empty-text\">\r\n        Select a field from the tree panel to edit its configuration.\r\n      </p>\r\n    </div>\r\n  } @else {\r\n    <div class=\"fb-config-panel__header\">\r\n      <div class=\"fb-config-panel__header-left\">\r\n        <h3 class=\"fb-config-panel__title\">\r\n          {{ selectedField.label || selectedField.name || 'Field Settings' }}\r\n        </h3>\r\n        @if (selectedField.type) {\r\n          <span class=\"fb-config-panel__badge\">{{ selectedField.type }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->\r\n      @if (!isDropdownType) {\r\n        <div class=\"fb-config-panel__type-switcher\">\r\n          <label class=\"fb-config-panel__type-label\" for=\"fb-field-type-select\">Field Type</label>\r\n          <select\r\n            id=\"fb-field-type-select\"\r\n            class=\"fb-config-panel__type-select\"\r\n            [value]=\"currentBuilderType\"\r\n            (change)=\"onTypeSelectChange($event)\"\r\n          >\r\n            @for (opt of switchableFieldTypes; track opt.value) {\r\n              <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"fb-config-panel__form-wrapper\">\r\n      @if (showConfigForm && configFormJson) {\r\n        <div class=\"fb-config-card\">\r\n          <lib-smart-form\r\n            [formJson]=\"configFormJson\"\r\n            [initialValues]=\"configInitialValues\"\r\n            (actionClick)=\"onActionClick($event)\"\r\n          />\r\n        </div>\r\n      } @else if (!showConfigForm) {\r\n        <!-- intentionally empty \u2014 SmartForm is being recycled -->\r\n      } @else {\r\n        <div class=\"fb-config-panel__error\">\r\n          No configuration schema available for this field type.\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-config-panel{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-panel-bg, #f9fafb);overflow:hidden}.fb-config-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-fc-empty-color, #9ca3af);text-align:center;padding:48px}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:20px 32px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;flex-wrap:wrap}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}.fb-config-panel__type-label{font-size:var(--fb-fc-type-label-size, .75rem);font-weight:600;color:var(--fb-fc-type-label-color, #6b7280);white-space:nowrap}.fb-config-panel__type-select{height:var(--fb-fc-type-select-height, 36px);padding:0 32px 0 10px;border:1px solid var(--fb-fc-type-select-border, #d1d5db);border-radius:var(--fb-fc-type-select-radius, 8px);background-color:var(--fb-fc-type-select-bg, #ffffff);color:var(--fb-fc-type-select-color, #111827);font-size:.8125rem;font-weight:500;cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;min-width:160px;transition:border-color .15s ease,box-shadow .15s ease}.fb-config-panel__type-select:hover{border-color:var(--fb-fc-type-select-hover-border, #9ca3af)}.fb-config-panel__type-select:focus{outline:none;border-color:var(--fb-fc-accent, #3b82f6);box-shadow:0 0 0 3px #3b82f61f}.fb-config-panel__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--fb-fc-title-color, #111827)}.fb-config-panel__badge{padding:4px 12px;background:var(--fb-fc-badge-bg, #eff6ff);color:var(--fb-fc-badge-color, #3b82f6);border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--fb-fc-badge-border, #dbeafe)}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;padding:40px}.fb-config-panel__form-wrapper .fb-config-card{background:var(--fb-fc-card-bg, #ffffff);border-radius:12px;border:1px solid var(--fb-fc-card-border, #e5e7eb);padding:40px;box-shadow:0 4px 20px #00000008;max-width:800px;margin:0 auto;--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-form-bg: transparent;--cc-sf-form-padding: 0;--cc-sf-form-border-radius: 12px;--cc-sf-form-border: none;--cc-sf-form-shadow: none;--cc-sf-form-max-width: 1200px;--cc-sf-form-title-size: 1.5rem;--cc-sf-form-title-weight: 700;--cc-sf-form-title-color: #111827;--cc-sf-form-desc-size: .875rem;--cc-sf-form-desc-color: #6B7280;--cc-sf-section-bg: transparent;--cc-sf-section-border: none;--cc-sf-section-radius: 10px;--cc-sf-section-padding: 0;--cc-sf-section-shadow: none;--cc-sf-section-gap: 20px;--cc-sf-section-label-size: 1rem;--cc-sf-section-label-weight: 600;--cc-sf-section-label-color: #1F2937;--cc-sf-section-label-border: 2px solid #E5E7EB;--cc-sf-instance-bg: #F9FAFB;--cc-sf-instance-border: 1px solid #E5E7EB;--cc-sf-instance-radius: 8px;--cc-sf-instance-padding: 16px;--cc-sf-instance-divider: 1px dashed #D1D5DB;--cc-sf-instance-num-color:#4B5563;--cc-sf-instance-num-size: .8125rem;--cc-sf-grid-gap: 24px;--cc-sf-label-size: .8125rem;--cc-sf-label-weight: 600;--cc-sf-label-color: #111827;--cc-sf-label-required-color: #DC2626;--cc-sf-input-bg: #ffffff;--cc-sf-input-color: #111827;--cc-sf-input-placeholder: #9CA3AF;--cc-sf-input-border: 1.5px solid #D1D5DB;--cc-sf-input-radius: 8px;--cc-sf-input-padding: .75rem 1rem;--cc-sf-input-font-size: .875rem;--cc-sf-input-shadow: none;--cc-sf-input-hover-border:#9CA3AF;--cc-sf-input-focus-border:#3B82F6;--cc-sf-input-focus-shadow:0 0 0 3px rgba(59, 130, 246, .12);--cc-sf-input-transition: all .2s ease;--cc-sf-input-disabled-bg: #F3F4F6;--cc-sf-input-disabled-color: #6B7280;--cc-sf-input-disabled-border:#E5E7EB;--cc-sf-error-border: #DC2626;--cc-sf-error-bg: #FEF2F2;--cc-sf-error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, .1);--cc-sf-error-text-color: #DC2626;--cc-sf-error-text-size: .75rem;--cc-sf-hint-color: #6B7280;--cc-sf-hint-size: .75rem;--cc-sf-chip-border: 1px solid #D1D5DB;--cc-sf-chip-radius: 20px;--cc-sf-chip-padding: 6px 14px;--cc-sf-chip-bg: #ffffff;--cc-sf-chip-color: #374151;--cc-sf-chip-hover-bg: #F3F4F6;--cc-sf-chip-selected-bg: #3B82F6;--cc-sf-chip-selected-color: #ffffff;--cc-sf-chip-selected-border:#3B82F6;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-track-on: #3B82F6;--cc-sf-switch-thumb: #ffffff;--cc-sf-star-empty: #D1D5DB;--cc-sf-star-filled: #F59E0B;--cc-sf-star-size: 28px;--cc-sf-generated-bg: #F3F4F6;--cc-sf-generated-border: 1px solid #E5E7EB;--cc-sf-generated-color: #6B7280;--cc-sf-generated-radius: 8px;--cc-sf-generated-padding: .625rem .875rem;--cc-sf-dropzone-bg: #FFFAF1;--cc-sf-dropzone-border: 1.5px dashed #CBD5E1;--cc-sf-dropzone-radius: 12px;--cc-sf-dropzone-hover-bg: #EFF6FF;--cc-sf-dropzone-hover-border: #93C5FD;--cc-sf-dropzone-over-border: #3B82F6;--cc-sf-dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, .12);--cc-sf-dropzone-icon-color: #94A3B8;--cc-sf-dropzone-link-color: #3B82F6;--cc-sf-dropzone-hint-color: #64748B;--cc-sf-uploaded-item-bg: #ffffff;--cc-sf-uploaded-item-border: 1px solid #E2E8F0;--cc-sf-uploaded-item-radius: 8px;--cc-sf-uploaded-remove-color: #94A3B8;--cc-sf-uploaded-remove-hover-bg: #FEF2F2;--cc-sf-uploaded-remove-hover-color: #DC2626;--cc-sf-btn-add-bg: transparent;--cc-sf-btn-add-color: #3B82F6;--cc-sf-btn-add-border: 1px dashed #CBD5E1;--cc-sf-btn-add-radius: 6px;--cc-sf-btn-add-hover-bg: #EFF6FF;--cc-sf-btn-add-hover-border: #BFDBFE;--cc-sf-btn-remove-bg: #FFF5F5;--cc-sf-btn-remove-color: #E53E3E;--cc-sf-btn-remove-border: 1px solid #FED7D7;--cc-sf-btn-remove-radius: 4px;--cc-sf-btn-remove-hover-bg: #FED7D7;--cc-sf-step-connector-color: #E5E7EB;--cc-sf-step-connector-done: #22C55E;--cc-sf-step-number-bg: #E5E7EB;--cc-sf-step-number-color: #6B7280;--cc-sf-step-number-size: 40px;--cc-sf-step-number-font-size: .875rem;--cc-sf-step-number-weight: 600;--cc-sf-step-label-size: .875rem;--cc-sf-step-label-color: #6B7280;--cc-sf-step-label-weight: 500;--cc-sf-step-active-bg: #3B82F6;--cc-sf-step-active-color: #ffffff;--cc-sf-step-active-label: #1D4ED8;--cc-sf-step-active-label-weight: 700;--cc-sf-step-done-bg: #22C55E;--cc-sf-step-done-color: #ffffff;--cc-sf-actions-border: 1px solid #E5E7EB;--cc-sf-actions-padding: 20px 0 0;--cc-sf-actions-gap: 12px;--cc-sf-btn-primary-bg: #3B82F6;--cc-sf-btn-primary-color: #ffffff;--cc-sf-btn-primary-radius: 8px;--cc-sf-btn-primary-padding: .625rem 1.5rem;--cc-sf-btn-primary-hover-bg: #2563EB;--cc-sf-btn-secondary-bg: #F3F4F6;--cc-sf-btn-secondary-color: #374151;--cc-sf-btn-secondary-radius: 8px;--cc-sf-btn-secondary-padding: .625rem 1.5rem;--cc-sf-btn-secondary-hover-bg: #E5E7EB;--cc-sf-btn-font-size: .875rem;--cc-sf-btn-font-weight: 600;--cc-sf-btn-transition: all .2s ease;--cc-sf-btn-disabled-opacity: .55}.fb-config-panel__error{padding:24px;background:var(--fb-fc-error-bg, #fef2f2);color:var(--fb-fc-error-color, #dc2626);border:1px solid var(--fb-fc-error-border, #fee2e2);border-radius:8px;font-size:14px;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-configurator-config-panel', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-config-panel\">\r\n  @if (!selectedField) {\r\n    <div class=\"fb-config-panel__empty\">\r\n      <div class=\"fb-config-panel__empty-icon\">\r\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n          stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n          <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\r\n          <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"/>\r\n          <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"/>\r\n        </svg>\r\n      </div>\r\n      <p class=\"fb-config-panel__empty-text\">\r\n        Select a field from the tree panel to edit its configuration.\r\n      </p>\r\n    </div>\r\n  } @else {\r\n    <div class=\"fb-config-panel__header\">\r\n      <div class=\"fb-config-panel__header-left\">\r\n        <h3 class=\"fb-config-panel__title\">\r\n          {{ selectedField.label || selectedField.name || 'Field Settings' }}\r\n        </h3>\r\n        @if (selectedField.type) {\r\n          <span class=\"fb-config-panel__badge\">{{ selectedField.type }}</span>\r\n        }\r\n      </div>\r\n\r\n      <!-- Field Type Switcher: hidden for DROPDOWN / MULTI_SELECT fields -->\r\n      @if (!isDropdownType) {\r\n        <div class=\"fb-config-panel__type-switcher\">\r\n          <label class=\"fb-config-panel__type-label\" for=\"fb-field-type-select\">Field Type</label>\r\n          <select\r\n            id=\"fb-field-type-select\"\r\n            class=\"fb-config-panel__type-select\"\r\n            [value]=\"currentBuilderType\"\r\n            (change)=\"onTypeSelectChange($event)\"\r\n          >\r\n            @for (opt of switchableFieldTypes; track opt.value) {\r\n              <option [value]=\"opt.value\">{{ opt.label }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"fb-config-panel__form-wrapper\">\r\n      @if (showConfigForm && configFormJson) {\r\n        <div class=\"fb-config-card\">\r\n          <lib-smart-form\r\n            [formJson]=\"configFormJson\"\r\n            [initialValues]=\"configInitialValues\"\r\n            (actionClick)=\"onActionClick($event)\"\r\n          />\r\n        </div>\r\n      } @else if (!showConfigForm) {\r\n        <!-- intentionally empty \u2014 SmartForm is being recycled -->\r\n      } @else {\r\n        <div class=\"fb-config-panel__error\">\r\n          No configuration schema available for this field type.\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".fb-config-panel{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-panel-bg, #f9fafb);overflow:hidden}.fb-config-panel__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--fb-fc-empty-color, #9ca3af);text-align:center;padding:48px}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:20px 32px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:16px;flex-wrap:wrap}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}.fb-config-panel__type-label{font-size:var(--fb-fc-type-label-size, .75rem);font-weight:600;color:var(--fb-fc-type-label-color, #6b7280);white-space:nowrap}.fb-config-panel__type-select{height:var(--fb-fc-type-select-height, 36px);padding:0 32px 0 10px;border:1px solid var(--fb-fc-type-select-border, #d1d5db);border-radius:var(--fb-fc-type-select-radius, 8px);background-color:var(--fb-fc-type-select-bg, #ffffff);color:var(--fb-fc-type-select-color, #111827);font-size:.8125rem;font-weight:500;cursor:pointer;appearance:none;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 8px center;min-width:160px;transition:border-color .15s ease,box-shadow .15s ease}.fb-config-panel__type-select:hover{border-color:var(--fb-fc-type-select-hover-border, #9ca3af)}.fb-config-panel__type-select:focus{outline:none;border-color:var(--fb-fc-accent, #3b82f6);box-shadow:0 0 0 3px #3b82f61f}.fb-config-panel__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--fb-fc-title-color, #111827)}.fb-config-panel__badge{padding:4px 12px;background:var(--fb-fc-badge-bg, #eff6ff);color:var(--fb-fc-badge-color, #3b82f6);border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--fb-fc-badge-border, #dbeafe)}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;padding:20px}.fb-config-panel__form-wrapper .fb-config-card{background:var(--fb-fc-card-bg, #ffffff);border-radius:12px;border:1px solid var(--fb-fc-card-border, #e5e7eb);padding:24px;box-shadow:0 4px 20px #00000008;max-width:800px;margin:0 auto;--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-form-bg: transparent;--cc-sf-form-padding: 0;--cc-sf-form-border-radius: 12px;--cc-sf-form-border: none;--cc-sf-form-shadow: none;--cc-sf-form-max-width: 1200px;--cc-sf-form-title-size: 1.5rem;--cc-sf-form-title-weight: 700;--cc-sf-form-title-color: #111827;--cc-sf-form-desc-size: .875rem;--cc-sf-form-desc-color: #6B7280;--cc-sf-section-bg: transparent;--cc-sf-section-border: none;--cc-sf-section-radius: 10px;--cc-sf-section-padding: 0;--cc-sf-section-shadow: none;--cc-sf-section-gap: 20px;--cc-sf-section-label-size: 1rem;--cc-sf-section-label-weight: 600;--cc-sf-section-label-color: #1F2937;--cc-sf-section-label-border: 2px solid #E5E7EB;--cc-sf-instance-bg: #F9FAFB;--cc-sf-instance-border: 1px solid #E5E7EB;--cc-sf-instance-radius: 8px;--cc-sf-instance-padding: 16px;--cc-sf-instance-divider: 1px dashed #D1D5DB;--cc-sf-instance-num-color:#4B5563;--cc-sf-instance-num-size: .8125rem;--cc-sf-grid-gap: 16px;--cc-sf-label-size: .8125rem;--cc-sf-label-weight: 600;--cc-sf-label-color: #111827;--cc-sf-label-required-color: #DC2626;--cc-sf-input-bg: #ffffff;--cc-sf-input-color: #111827;--cc-sf-input-placeholder: #9CA3AF;--cc-sf-input-border: 1.5px solid #D1D5DB;--cc-sf-input-radius: 8px;--cc-sf-input-padding: .625rem .875rem;--cc-sf-input-font-size: .875rem;--cc-sf-input-shadow: none;--cc-sf-input-hover-border:#9CA3AF;--cc-sf-input-focus-border:#3B82F6;--cc-sf-input-focus-shadow:0 0 0 3px rgba(59, 130, 246, .12);--cc-sf-input-transition: all .2s ease;--cc-sf-input-disabled-bg: #F3F4F6;--cc-sf-input-disabled-color: #6B7280;--cc-sf-input-disabled-border:#E5E7EB;--cc-sf-error-border: #DC2626;--cc-sf-error-bg: #FEF2F2;--cc-sf-error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, .1);--cc-sf-error-text-color: #DC2626;--cc-sf-error-text-size: .75rem;--cc-sf-hint-color: #6B7280;--cc-sf-hint-size: .75rem;--cc-sf-chip-border: 1px solid #D1D5DB;--cc-sf-chip-radius: 20px;--cc-sf-chip-padding: 6px 14px;--cc-sf-chip-bg: #ffffff;--cc-sf-chip-color: #374151;--cc-sf-chip-hover-bg: #F3F4F6;--cc-sf-chip-selected-bg: #3B82F6;--cc-sf-chip-selected-color: #ffffff;--cc-sf-chip-selected-border:#3B82F6;--cc-sf-switch-track-off: #D1D5DB;--cc-sf-switch-track-on: #3B82F6;--cc-sf-switch-thumb: #ffffff;--cc-sf-star-empty: #D1D5DB;--cc-sf-star-filled: #F59E0B;--cc-sf-star-size: 28px;--cc-sf-generated-bg: #F3F4F6;--cc-sf-generated-border: 1px solid #E5E7EB;--cc-sf-generated-color: #6B7280;--cc-sf-generated-radius: 8px;--cc-sf-generated-padding: .625rem .875rem;--cc-sf-dropzone-bg: #FFFAF1;--cc-sf-dropzone-border: 1.5px dashed #CBD5E1;--cc-sf-dropzone-radius: 12px;--cc-sf-dropzone-hover-bg: #EFF6FF;--cc-sf-dropzone-hover-border: #93C5FD;--cc-sf-dropzone-over-border: #3B82F6;--cc-sf-dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, .12);--cc-sf-dropzone-icon-color: #94A3B8;--cc-sf-dropzone-link-color: #3B82F6;--cc-sf-dropzone-hint-color: #64748B;--cc-sf-uploaded-item-bg: #ffffff;--cc-sf-uploaded-item-border: 1px solid #E2E8F0;--cc-sf-uploaded-item-radius: 8px;--cc-sf-uploaded-remove-color: #94A3B8;--cc-sf-uploaded-remove-hover-bg: #FEF2F2;--cc-sf-uploaded-remove-hover-color: #DC2626;--cc-sf-btn-add-bg: transparent;--cc-sf-btn-add-color: #3B82F6;--cc-sf-btn-add-border: 1px dashed #CBD5E1;--cc-sf-btn-add-radius: 6px;--cc-sf-btn-add-hover-bg: #EFF6FF;--cc-sf-btn-add-hover-border: #BFDBFE;--cc-sf-btn-remove-bg: #FFF5F5;--cc-sf-btn-remove-color: #E53E3E;--cc-sf-btn-remove-border: 1px solid #FED7D7;--cc-sf-btn-remove-radius: 4px;--cc-sf-btn-remove-hover-bg: #FED7D7;--cc-sf-step-connector-color: #E5E7EB;--cc-sf-step-connector-done: #22C55E;--cc-sf-step-number-bg: #E5E7EB;--cc-sf-step-number-color: #6B7280;--cc-sf-step-number-size: 40px;--cc-sf-step-number-font-size: .875rem;--cc-sf-step-number-weight: 600;--cc-sf-step-label-size: .875rem;--cc-sf-step-label-color: #6B7280;--cc-sf-step-label-weight: 500;--cc-sf-step-active-bg: #3B82F6;--cc-sf-step-active-color: #ffffff;--cc-sf-step-active-label: #1D4ED8;--cc-sf-step-active-label-weight: 700;--cc-sf-step-done-bg: #22C55E;--cc-sf-step-done-color: #ffffff;--cc-sf-actions-border: 1px solid #E5E7EB;--cc-sf-actions-padding: 20px 0 0;--cc-sf-actions-gap: 12px;--cc-sf-btn-primary-bg: #3B82F6;--cc-sf-btn-primary-color: #ffffff;--cc-sf-btn-primary-radius: 8px;--cc-sf-btn-primary-padding: .625rem 1.5rem;--cc-sf-btn-primary-hover-bg: #2563EB;--cc-sf-btn-secondary-bg: #F3F4F6;--cc-sf-btn-secondary-color: #374151;--cc-sf-btn-secondary-radius: 8px;--cc-sf-btn-secondary-padding: .625rem 1.5rem;--cc-sf-btn-secondary-hover-bg: #E5E7EB;--cc-sf-btn-font-size: .875rem;--cc-sf-btn-font-weight: 600;--cc-sf-btn-transition: all .2s ease;--cc-sf-btn-disabled-opacity: .55}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.75rem;font-weight:600;margin:0;flex-shrink:1;min-width:0;word-break:keep-all}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .switch,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .switch{flex-shrink:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{flex-wrap:wrap;gap:12px 16px}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>*{flex:1;min-width:100px}.fb-config-panel__error{padding:24px;background:var(--fb-fc-error-bg, #fef2f2);color:var(--fb-fc-error-color, #dc2626);border:1px solid var(--fb-fc-error-border, #fee2e2);border-radius:8px;font-size:14px;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedField: [{
                 type: Input
             }], selectedFieldInfo: [{
@@ -6907,11 +7065,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], typeChange: [{
                 type: Output
+            }], showOptionConfig: [{
+                type: Input
             }] } });
 
 class FieldConfiguratorComponent {
     schema;
     schemaChange = new EventEmitter();
+    /**
+     * When false, the optionConfig section (apiUrl, dataPath, etc.) is hidden
+     * from the configurator panel. Useful for business-user-facing configurators
+     * where option URLs are pre-filled by the developer.
+     * Defaults to true (show everything).
+     */
+    showOptionConfig = true;
     store = inject(FieldConfiguratorService);
     schemaMapOverride = inject(BUILDER_FIELD_TYPE_SCHEMA_MAP, { optional: true });
     /**
@@ -6949,16 +7116,18 @@ class FieldConfiguratorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FieldConfiguratorComponent, isStandalone: false, selector: "lib-field-configurator", inputs: { schema: "schema" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldConfiguratorService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden}.fb-configurator__sidebar{width:var(--fb-fc-sidebar-width, 400px);flex-shrink:0;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden}.fb-configurator__main{flex:1;overflow-y:auto;background:var(--fb-fc-main-bg, #ffffff)}\n"], dependencies: [{ kind: "component", type: ConfiguratorTreeComponent, selector: "lib-configurator-tree", inputs: ["tree", "selectedFieldPath"], outputs: ["selectField", "toggleExpanded"] }, { kind: "component", type: ConfiguratorConfigPanelComponent, selector: "lib-configurator-config-panel", inputs: ["selectedField", "selectedFieldInfo", "builderFieldType", "fieldTypeSchemaMap"], outputs: ["configChange", "typeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FieldConfiguratorComponent, isStandalone: false, selector: "lib-field-configurator", inputs: { schema: "schema", showOptionConfig: "showOptionConfig" }, outputs: { schemaChange: "schemaChange" }, providers: [FieldConfiguratorService], usesOnChanges: true, ngImport: i0, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden}.fb-configurator__sidebar{width:var(--fb-fc-sidebar-width, 400px);flex-shrink:0;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden}.fb-configurator__main{flex:1;overflow-y:auto;background:var(--fb-fc-main-bg, #ffffff)}\n"], dependencies: [{ kind: "component", type: ConfiguratorTreeComponent, selector: "lib-configurator-tree", inputs: ["tree", "selectedFieldPath"], outputs: ["selectField", "toggleExpanded"] }, { kind: "component", type: ConfiguratorConfigPanelComponent, selector: "lib-configurator-config-panel", inputs: ["selectedField", "selectedFieldInfo", "builderFieldType", "fieldTypeSchemaMap", "showOptionConfig"], outputs: ["configChange", "typeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldConfiguratorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-field-configurator', standalone: false, providers: [FieldConfiguratorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden}.fb-configurator__sidebar{width:var(--fb-fc-sidebar-width, 400px);flex-shrink:0;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden}.fb-configurator__main{flex:1;overflow-y:auto;background:var(--fb-fc-main-bg, #ffffff)}\n"] }]
+            args: [{ selector: 'lib-field-configurator', standalone: false, providers: [FieldConfiguratorService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-configurator\">\r\n  <div class=\"fb-configurator__layout\">\r\n    <div class=\"fb-configurator__sidebar\">\r\n      <lib-configurator-tree\r\n        [tree]=\"store.tree()\"\r\n        [selectedFieldPath]=\"store.selectedFieldPath()\"\r\n        (selectField)=\"onFieldSelected($event)\"\r\n        (toggleExpanded)=\"onNodeToggleExpanded($event)\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"fb-configurator__main\">\r\n      <lib-configurator-config-panel\r\n        [selectedField]=\"store.selectedField()\"\r\n        [selectedFieldInfo]=\"store.selectedFieldInfo()\"\r\n        [builderFieldType]=\"store.selectedFieldBuilderType()\"\r\n        [fieldTypeSchemaMap]=\"finalFieldTypeSchemaMap\"\r\n        [showOptionConfig]=\"showOptionConfig\"\r\n        (configChange)=\"onConfigChange($event)\"\r\n        (typeChange)=\"onTypeChange($event)\"\r\n      />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".fb-configurator{display:flex;flex-direction:column;height:100%;background:var(--fb-fc-bg, #ffffff);font-family:var(--fb-font-family, \"Inter\", sans-serif)}.fb-configurator__layout{flex:1;display:flex;overflow:hidden}.fb-configurator__sidebar{width:var(--fb-fc-sidebar-width, 400px);flex-shrink:0;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden}.fb-configurator__main{flex:1;overflow-y:auto;background:var(--fb-fc-main-bg, #ffffff)}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], schemaChange: [{
                 type: Output
+            }], showOptionConfig: [{
+                type: Input
             }] } });
 
 const COMPONENTS = [
@@ -7005,6 +7174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class ConfirmationModalComponent {
     config;
     isOpen = false;
+    confirmDisabled = false;
+    confirmLoading = false;
     confirm = new EventEmitter();
     cancel = new EventEmitter();
     close = new EventEmitter();
@@ -7024,6 +7195,7 @@ class ConfirmationModalComponent {
     };
     mergedConfig;
     previousActiveElement = null;
+    isSubmitting = false;
     ngOnInit() {
         this.updateConfig();
         // Store currently focused element
@@ -7037,9 +7209,20 @@ class ConfirmationModalComponent {
         this.updateConfig();
         if (this.isOpen !== undefined) {
             this.toggleBodyScroll(this.isOpen);
+            if (!this.isOpen) {
+                this.isSubmitting = false; // Reset submission guard when modal closes
+            }
+        }
+        // Reset submission guard when loading state finishes
+        if (this.isSubmitting && !this.confirmLoading && !this.mergedConfig.confirmButton.loading) {
+            this.isSubmitting = false;
         }
     }
     updateConfig() {
+        if (!this.config) {
+            this.mergedConfig = { ...this.defaultConfig };
+            return;
+        }
         // Merge user config with defaults
         this.mergedConfig = {
             ...this.defaultConfig,
@@ -7052,6 +7235,9 @@ class ConfirmationModalComponent {
                 ...this.config.confirmButton
             }
         };
+        if (this.mergedConfig.confirmButton) {
+            // Logic handled by input/flag
+        }
     }
     ngOnDestroy() {
         // Restore body scroll
@@ -7083,8 +7269,10 @@ class ConfirmationModalComponent {
         }
     }
     onConfirm() {
-        if (!this.mergedConfig.confirmButton.disabled &&
-            !this.mergedConfig.confirmButton.loading) {
+        const isDisabled = this.confirmDisabled || this.mergedConfig.confirmButton.disabled;
+        const isLoading = this.confirmLoading || this.mergedConfig.confirmButton.loading;
+        if (!isDisabled && !isLoading && !this.isSubmitting) {
+            this.isSubmitting = true;
             this.confirm.emit();
         }
     }
@@ -7114,7 +7302,8 @@ class ConfirmationModalComponent {
             danger: 'cc-btn-danger',
             warning: 'cc-btn-warning'
         };
-        return `cc-btn ${typeMap[this.mergedConfig.confirmButton.type]}`;
+        const isLoading = this.confirmLoading || this.mergedConfig.confirmButton.loading;
+        return `cc-btn ${typeMap[this.mergedConfig.confirmButton.type]} ${isLoading ? 'cc-btn-loading' : ''}`;
     }
     getHeaderClass() {
         return `modal-header modal-header--${this.mergedConfig.headerTheme}`;
@@ -7141,15 +7330,19 @@ 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" }, 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\" (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 }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (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\" [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]=\"mergedConfig.confirmButton.disabled || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"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-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}.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);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.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 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%}}\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.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\" (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 }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (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\" [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-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}.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);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.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 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%}}\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.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\" (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 }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (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\" [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]=\"mergedConfig.confirmButton.disabled || mergedConfig.confirmButton.loading\"\r\n                    (click)=\"onConfirm()\">\r\n                    <span *ngIf=\"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-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}.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);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.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 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%}}\n"] }]
+            args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" (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 }}\" [style.width]=\"getModalWidth()\"\r\n        [style.background-color]=\"mergedConfig.backgroundColor\" [style.border-radius]=\"mergedConfig.borderRadius\"\r\n        [style.border-top-left-radius]=\"mergedConfig.borderTopLeftRadius\"\r\n        [style.border-top-right-radius]=\"mergedConfig.borderTopRightRadius\"\r\n        [style.border-bottom-left-radius]=\"mergedConfig.borderBottomLeftRadius\"\r\n        [style.border-bottom-right-radius]=\"mergedConfig.borderBottomRightRadius\" (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\" [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-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}.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);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark)}.modal-header--dark .modal-header__close{color:#ffffffb3}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:#ffffffb3}.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 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%}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], isOpen: [{
                 type: Input
+            }], confirmDisabled: [{
+                type: Input
+            }], confirmLoading: [{
+                type: Input
             }], confirm: [{
                 type: Output
             }], cancel: [{
@@ -7295,7 +7488,7 @@ class ButtonDropdownComponent {
         this.confirmMessage = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$4.Router }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonDropdownComponent, isStandalone: false, selector: "lib-button-dropdown", inputs: { label: "label", variant: "variant", menuTheme: "menuTheme", icon: "icon", actions: "actions", data: "data", disabled: "disabled" }, outputs: { apiActionStart: "apiActionStart", apiActionSuccess: "apiActionSuccess", apiActionError: "apiActionError", actionClick: "actionClick" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"cc-btn-dropdown-container\">\r\n    <!-- Main Toggle Button -->\r\n    <lib-button \r\n        [variant]=\"variant\" \r\n        [disabled]=\"disabled\"\r\n        (click)=\"toggleDropdown($event)\">\r\n        <span class=\"cc-btn-dropdown-content\">\r\n            {{ label }}\r\n            <i *ngIf=\"icon\" [class]=\"icon\" class=\"cc-btn-dropdown-icon\"></i>\r\n        </span>\r\n    </lib-button>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" [ngClass]=\"'cc-dropdown-menu--' + menuTheme\" *ngIf=\"isOpen\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"cc-dropdown-item\" \r\n            *ngFor=\"let action of actions\"\r\n            [disabled]=\"action.disabled\"\r\n            [ngClass]=\"action.variant ? 'cc-dropdown-item--' + action.variant : (action.color === 'red' || action.color === 'danger') ? 'cc-dropdown-item--danger' : ''\"\r\n            [style.color]=\"action.color && !action.variant && action.color !== 'red' && action.color !== 'danger' ? action.color : null\"\r\n            (click)=\"onActionItemClick(action, $event)\">\r\n            <i *ngIf=\"action.icon\" [class]=\"action.icon\" class=\"cc-dropdown-item-icon\"></i>\r\n            <span>{{ action.label }}</span>\r\n        </button>\r\n        <div class=\"cc-dropdown-empty\" *ngIf=\"!actions || actions.length === 0\">\r\n            No actions available\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Confirmation Modal for Critical Actions -->\r\n<cc-confirmation-modal \r\n    *ngIf=\"isConfirmModalOpen\"\r\n    [isOpen]=\"isConfirmModalOpen\" \r\n    [config]=\"confirmConfig!\"\r\n    (confirm)=\"invokePendingAction()\"\r\n    (close)=\"closeConfirmModal()\"\r\n    (cancel)=\"closeConfirmModal()\">\r\n    <p>{{ confirmMessage }}</p>\r\n</cc-confirmation-modal>\r\n", styles: [".cc-btn-dropdown-container{position:relative;display:inline-block}.cc-btn-dropdown-container .cc-btn-dropdown-content{display:flex;align-items:center;gap:.5rem}.cc-btn-dropdown-container .cc-btn-dropdown-icon{font-size:.85em;margin-left:2px}.cc-dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:1000;min-width:140px;border-radius:var(--cc-btn-dropdown-radius, 4px);padding:.25rem 0;font-family:var(--cc-btn-font-family, \"Inter\", sans-serif);font-size:var(--cc-btn-font-size, .875rem)}.cc-dropdown-menu--light{background-color:var(--cc-btn-dropdown-light-bg, #ffffff);border:var(--cc-btn-dropdown-border-light, 1px solid #e0e0e0);box-shadow:var(--cc-btn-dropdown-shadow-light, 0 4px 6px rgba(0, 0, 0, .1))}.cc-dropdown-menu--light .cc-dropdown-item{color:var(--cc-btn-dropdown-light-item-color, #333333)}.cc-dropdown-menu--light .cc-dropdown-item:hover:not(:disabled){background-color:var(--cc-btn-dropdown-light-item-hover-bg, #f5f5f5)}.cc-dropdown-menu--light .cc-dropdown-empty{color:#888}.cc-dropdown-menu--dark{background-color:var(--cc-btn-dropdown-dark-bg, #1a1a1a);border:var(--cc-btn-dropdown-border-dark, 1px solid #444444);box-shadow:var(--cc-btn-dropdown-shadow-dark, 0 4px 6px rgba(0, 0, 0, .5))}.cc-dropdown-menu--dark .cc-dropdown-item{color:var(--cc-btn-dropdown-dark-item-color, #ffffff)}.cc-dropdown-menu--dark .cc-dropdown-item:hover:not(:disabled){background-color:var(--cc-btn-dropdown-dark-item-hover-bg, #2d2d2d)}.cc-dropdown-menu--dark .cc-dropdown-empty{color:#bbb}.cc-dropdown-menu .cc-dropdown-empty{padding:.5rem 1rem;font-style:italic}.cc-dropdown-menu .cc-dropdown-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}.cc-dropdown-menu .cc-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.cc-dropdown-menu .cc-dropdown-item .cc-dropdown-item-icon{margin-right:.5rem;width:1rem;text-align:center}.cc-dropdown-menu .cc-dropdown-item--primary{background-color:var(--cc-btn-dropdown-primary-bg, #262125);color:var(--cc-btn-dropdown-primary-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--primary:hover:not(:disabled){background-color:var(--cc-btn-dropdown-primary-hover, #3d353b)}.cc-dropdown-menu .cc-dropdown-item--warning{background-color:var(--cc-btn-dropdown-warning-bg, #F9C80E);color:var(--cc-btn-dropdown-warning-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--warning:hover:not(:disabled){background-color:var(--cc-btn-dropdown-warning-hover, #ebd573)}.cc-dropdown-menu .cc-dropdown-item--danger{background-color:var(--cc-btn-dropdown-danger-bg, #E63E30);color:var(--cc-btn-dropdown-danger-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--danger:hover:not(:disabled){background-color:var(--cc-btn-dropdown-danger-hover, #c93528)}.cc-dropdown-menu .cc-dropdown-item--success{background-color:var(--cc-btn-dropdown-success-bg, #16A34A);color:var(--cc-btn-dropdown-success-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--success:hover:not(:disabled){background-color:var(--cc-btn-dropdown-success-hover, #148f41)}.cc-dropdown-menu .cc-dropdown-item--secondary{background-color:var(--cc-btn-dropdown-secondary-bg, #E8EAED);color:var(--cc-btn-dropdown-secondary-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--secondary:hover:not(:disabled){background-color:var(--cc-btn-dropdown-secondary-hover, #d1d5db)}.cc-dropdown-menu .cc-dropdown-item--outline{background-color:var(--cc-btn-dropdown-outline-bg, transparent);color:var(--cc-btn-dropdown-outline-color, #000000);border:1px solid var(--cc-btn-dropdown-outline-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--outline:hover:not(:disabled){background-color:var(--cc-btn-dropdown-outline-hover, rgba(0, 0, 0, .05))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ButtonDropdownComponent, isStandalone: false, selector: "lib-button-dropdown", inputs: { label: "label", variant: "variant", menuTheme: "menuTheme", icon: "icon", actions: "actions", data: "data", disabled: "disabled" }, outputs: { apiActionStart: "apiActionStart", apiActionSuccess: "apiActionSuccess", apiActionError: "apiActionError", actionClick: "actionClick" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<div class=\"cc-btn-dropdown-container\">\r\n    <!-- Main Toggle Button -->\r\n    <lib-button \r\n        [variant]=\"variant\" \r\n        [disabled]=\"disabled\"\r\n        (click)=\"toggleDropdown($event)\">\r\n        <span class=\"cc-btn-dropdown-content\">\r\n            {{ label }}\r\n            <i *ngIf=\"icon\" [class]=\"icon\" class=\"cc-btn-dropdown-icon\"></i>\r\n        </span>\r\n    </lib-button>\r\n\r\n    <!-- Dropdown Menu -->\r\n    <div class=\"cc-dropdown-menu\" [ngClass]=\"'cc-dropdown-menu--' + menuTheme\" *ngIf=\"isOpen\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"cc-dropdown-item\" \r\n            *ngFor=\"let action of actions\"\r\n            [disabled]=\"action.disabled\"\r\n            [ngClass]=\"action.variant ? 'cc-dropdown-item--' + action.variant : (action.color === 'red' || action.color === 'danger') ? 'cc-dropdown-item--danger' : ''\"\r\n            [style.color]=\"action.color && !action.variant && action.color !== 'red' && action.color !== 'danger' ? action.color : null\"\r\n            (click)=\"onActionItemClick(action, $event)\">\r\n            <i *ngIf=\"action.icon\" [class]=\"action.icon\" class=\"cc-dropdown-item-icon\"></i>\r\n            <span>{{ action.label }}</span>\r\n        </button>\r\n        <div class=\"cc-dropdown-empty\" *ngIf=\"!actions || actions.length === 0\">\r\n            No actions available\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Confirmation Modal for Critical Actions -->\r\n<cc-confirmation-modal \r\n    *ngIf=\"isConfirmModalOpen\"\r\n    [isOpen]=\"isConfirmModalOpen\" \r\n    [config]=\"confirmConfig!\"\r\n    (confirm)=\"invokePendingAction()\"\r\n    (close)=\"closeConfirmModal()\"\r\n    (cancel)=\"closeConfirmModal()\">\r\n    <p>{{ confirmMessage }}</p>\r\n</cc-confirmation-modal>\r\n", styles: [".cc-btn-dropdown-container{position:relative;display:inline-block}.cc-btn-dropdown-container .cc-btn-dropdown-content{display:flex;align-items:center;gap:.5rem}.cc-btn-dropdown-container .cc-btn-dropdown-icon{font-size:.85em;margin-left:2px}.cc-dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:1000;min-width:140px;border-radius:var(--cc-btn-dropdown-radius, 4px);padding:.25rem 0;font-family:var(--cc-btn-font-family, \"Inter\", sans-serif);font-size:var(--cc-btn-font-size, .875rem)}.cc-dropdown-menu--light{background-color:var(--cc-btn-dropdown-light-bg, #ffffff);border:var(--cc-btn-dropdown-border-light, 1px solid #e0e0e0);box-shadow:var(--cc-btn-dropdown-shadow-light, 0 4px 6px rgba(0, 0, 0, .1))}.cc-dropdown-menu--light .cc-dropdown-item{color:var(--cc-btn-dropdown-light-item-color, #333333)}.cc-dropdown-menu--light .cc-dropdown-item:hover:not(:disabled){background-color:var(--cc-btn-dropdown-light-item-hover-bg, #f5f5f5)}.cc-dropdown-menu--light .cc-dropdown-empty{color:#888}.cc-dropdown-menu--dark{background-color:var(--cc-btn-dropdown-dark-bg, #1a1a1a);border:var(--cc-btn-dropdown-border-dark, 1px solid #444444);box-shadow:var(--cc-btn-dropdown-shadow-dark, 0 4px 6px rgba(0, 0, 0, .5))}.cc-dropdown-menu--dark .cc-dropdown-item{color:var(--cc-btn-dropdown-dark-item-color, #ffffff)}.cc-dropdown-menu--dark .cc-dropdown-item:hover:not(:disabled){background-color:var(--cc-btn-dropdown-dark-item-hover-bg, #2d2d2d)}.cc-dropdown-menu--dark .cc-dropdown-empty{color:#bbb}.cc-dropdown-menu .cc-dropdown-empty{padding:.5rem 1rem;font-style:italic}.cc-dropdown-menu .cc-dropdown-item{display:flex;align-items:center;width:100%;padding:.5rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}.cc-dropdown-menu .cc-dropdown-item:disabled{opacity:.5;cursor:not-allowed}.cc-dropdown-menu .cc-dropdown-item .cc-dropdown-item-icon{margin-right:.5rem;width:1rem;text-align:center}.cc-dropdown-menu .cc-dropdown-item--primary{background-color:var(--cc-btn-dropdown-primary-bg, #262125);color:var(--cc-btn-dropdown-primary-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--primary:hover:not(:disabled){background-color:var(--cc-btn-dropdown-primary-hover, #3d353b)}.cc-dropdown-menu .cc-dropdown-item--warning{background-color:var(--cc-btn-dropdown-warning-bg, #F9C80E);color:var(--cc-btn-dropdown-warning-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--warning:hover:not(:disabled){background-color:var(--cc-btn-dropdown-warning-hover, #ebd573)}.cc-dropdown-menu .cc-dropdown-item--danger{background-color:var(--cc-btn-dropdown-danger-bg, #E63E30);color:var(--cc-btn-dropdown-danger-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--danger:hover:not(:disabled){background-color:var(--cc-btn-dropdown-danger-hover, #c93528)}.cc-dropdown-menu .cc-dropdown-item--success{background-color:var(--cc-btn-dropdown-success-bg, #16A34A);color:var(--cc-btn-dropdown-success-color, #ffffff)}.cc-dropdown-menu .cc-dropdown-item--success:hover:not(:disabled){background-color:var(--cc-btn-dropdown-success-hover, #148f41)}.cc-dropdown-menu .cc-dropdown-item--secondary{background-color:var(--cc-btn-dropdown-secondary-bg, #E8EAED);color:var(--cc-btn-dropdown-secondary-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--secondary:hover:not(:disabled){background-color:var(--cc-btn-dropdown-secondary-hover, #d1d5db)}.cc-dropdown-menu .cc-dropdown-item--outline{background-color:var(--cc-btn-dropdown-outline-bg, transparent);color:var(--cc-btn-dropdown-outline-color, #000000);border:1px solid var(--cc-btn-dropdown-outline-color, #000000)}.cc-dropdown-menu .cc-dropdown-item--outline:hover:not(:disabled){background-color:var(--cc-btn-dropdown-outline-hover, rgba(0, 0, 0, .05))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ButtonDropdownComponent, decorators: [{
             type: Component,
@@ -9223,11 +9416,29 @@ class SmartTableComponent {
     cdr;
     ngZone;
     config;
+    /**
+     * External data mode: pass table rows directly from the parent.
+     * When this input is provided, the component will NOT make any internal API calls.
+     * Instead, it emits sortChange / pageChange / searchChange / filterChange events
+     * so the parent can fetch and supply updated data.
+     */
+    tableData;
+    /**
+     * Total number of items — used by the pagination component when operating in
+     * external-data mode. Must be kept in sync by the parent.
+     */
+    totalItemsCount;
     action = new EventEmitter();
     topAction = new EventEmitter(); // For top bar buttons
     filterChange = new EventEmitter();
     rowSelect = new EventEmitter();
     columnClick = new EventEmitter();
+    /** Emitted in external-data mode when the user changes the sort column/direction. */
+    sortChange = new EventEmitter();
+    /** Emitted in external-data mode when the user changes the page or page size. */
+    pageChange = new EventEmitter();
+    /** Emitted in external-data mode when the user types in the search box. */
+    searchChange = new EventEmitter();
     data = [];
     totalItems = 0;
     currentPage = 1;
@@ -9241,6 +9452,12 @@ class SmartTableComponent {
     stickyColumnStyles = {};
     hasStickyColumns = false;
     openDropdownId = null;
+    /** Viewport-relative position used to render the dropdown as position:fixed. */
+    dropdownPosition = { top: 0, right: 0 };
+    // --- Delete confirmation modal state ---
+    deleteModalOpen = false;
+    deleteModalConfig = {};
+    pendingDeleteAction = null;
     searchSubject = new Subject();
     stickyHeaders;
     resizeObserver = null;
@@ -9254,7 +9471,13 @@ class SmartTableComponent {
         this.searchSubject.pipe(debounceTime(this.config?.searchConfig?.debounceTime || 300), distinctUntilChanged()).subscribe(term => {
             this.searchTerm = term;
             this.currentPage = 1;
-            this.loadData();
+            if (this.tableData !== undefined) {
+                // External-data mode: delegate to parent via event
+                this.searchChange.emit(this.buildChangeEvent());
+            }
+            else {
+                this.loadData();
+            }
         });
     }
     ngOnInit() {
@@ -9267,13 +9490,33 @@ class SmartTableComponent {
                 this.isSortActive = true;
             }
             this.loadFilterOptions();
-            this.loadData();
+            if (this.tableData !== undefined) {
+                // External-data mode: sync incoming data, skip internal API call
+                this.data = this.tableData;
+                if (this.totalItemsCount !== undefined) {
+                    this.totalItems = this.totalItemsCount;
+                }
+            }
+            else {
+                this.loadData();
+            }
         }
     }
     ngOnChanges(changes) {
+        // External data changed — sync directly without an API call
+        if (changes['tableData']) {
+            this.data = this.tableData || [];
+        }
+        // Total count updated from parent
+        if (changes['totalItemsCount'] && this.totalItemsCount !== undefined) {
+            this.totalItems = this.totalItemsCount;
+        }
+        // Config changed (non-first) — reload filter opts; reload data only if NOT in external mode
         if (changes['config'] && !changes['config'].firstChange) {
             this.loadFilterOptions();
-            this.loadData();
+            if (this.tableData === undefined) {
+                this.loadData();
+            }
             setTimeout(() => this.calculateStickyPositions());
         }
     }
@@ -9470,13 +9713,23 @@ class SmartTableComponent {
     // --- Actions ---
     onPageChange(page) {
         this.currentPage = page;
-        this.loadData();
+        if (this.tableData !== undefined) {
+            this.pageChange.emit(this.buildChangeEvent());
+        }
+        else {
+            this.loadData();
+        }
     }
     onPageSizeChange(size) {
         if (this.config.pagination) {
             this.config.pagination.pageSize = size;
             this.currentPage = 1; // Reset to first page
-            this.loadData();
+            if (this.tableData !== undefined) {
+                this.pageChange.emit(this.buildChangeEvent());
+            }
+            else {
+                this.loadData();
+            }
         }
     }
     onSort(col) {
@@ -9490,7 +9743,13 @@ class SmartTableComponent {
             this.activeSort.direction = 'ASC';
         }
         this.isSortActive = true; // User has actively sorted, include orderBy in API call
-        this.loadData();
+        if (this.tableData !== undefined) {
+            // External-data mode: let the parent handle the API call
+            this.sortChange.emit(this.buildChangeEvent());
+        }
+        else {
+            this.loadData();
+        }
     }
     onSearch(event) {
         const value = event.target.value;
@@ -9501,7 +9760,24 @@ class SmartTableComponent {
         this.activeFilters[key] = value;
         this.currentPage = 1;
         this.filterChange.emit({ key, value });
-        this.loadData();
+        if (this.tableData === undefined) {
+            this.loadData();
+        }
+    }
+    // --- Private helpers ---
+    /**
+     * Assembles the current table state into a `TableDataChangeEvent` object.
+     * Emitted to the parent in external-data mode so it can fetch and supply new data.
+     */
+    buildChangeEvent() {
+        return {
+            page: this.currentPage,
+            pageSize: this.config.pagination?.pageSize || 10,
+            sortBy: this.activeSort.key || undefined,
+            orderBy: this.isSortActive ? this.activeSort.direction : undefined,
+            searchTerm: this.searchTerm || undefined,
+            filters: { ...this.activeFilters }
+        };
     }
     onAction(action, row) {
         if (action.type === 'callback' && action.callback) {
@@ -9531,6 +9807,10 @@ class SmartTableComponent {
     }
     onActionItemClick(item, row, event) {
         event.stopPropagation();
+        if (item.type === 'delete') {
+            this.openDeleteConfirmModal(item, row);
+            return;
+        }
         if (item.type === 'callback' && item.callback) {
             item.callback(row);
         }
@@ -9556,6 +9836,48 @@ class SmartTableComponent {
             this.action.emit({ action: item, row });
         }
     }
+    openDeleteConfirmModal(item, row) {
+        const cfg = item.deleteConfig || {};
+        this.deleteModalConfig = {
+            title: cfg.modalTitle || 'Confirm Delete',
+            size: 'sm',
+            headerTheme: 'dark',
+            confirmButton: {
+                label: cfg.confirmLabel || 'Delete',
+                type: 'danger'
+            },
+            cancelButton: {
+                label: cfg.cancelLabel || 'Cancel',
+                show: true
+            }
+        };
+        this.deleteModalMessage = cfg.modalMessage || 'Are you sure you want to delete this item?';
+        this.pendingDeleteAction = { item, row };
+        this.deleteModalOpen = true;
+    }
+    deleteModalMessage = '';
+    onDeleteConfirm() {
+        this.deleteModalOpen = false;
+        if (!this.pendingDeleteAction)
+            return;
+        const { item, row } = this.pendingDeleteAction;
+        const cfg = item.deleteConfig || {};
+        const idField = cfg.idField || 'id';
+        const url = cfg.apiUrl.replace(`:${idField}`, row[idField]);
+        this.pendingDeleteAction = null;
+        this.loading = true;
+        this.http.delete(url, { headers: this.getHeaders() }).pipe(finalize(() => this.loading = false)).subscribe({
+            next: () => {
+                this.loadData();
+                this.action.emit({ action: item, row });
+            },
+            error: (err) => console.error('[SmartTable] Delete API Error', err)
+        });
+    }
+    onDeleteCancel() {
+        this.deleteModalOpen = false;
+        this.pendingDeleteAction = null;
+    }
     onTopAction(action) {
         if (action.type === 'callback' && action.callback) {
             action.callback(null); // No row for top action
@@ -9793,19 +10115,35 @@ class SmartTableComponent {
     }
     toggleDropdown(id, event) {
         event.stopPropagation();
-        this.openDropdownId = this.openDropdownId === id ? null : id;
+        if (this.openDropdownId === id) {
+            this.openDropdownId = null;
+            return;
+        }
+        // Compute fixed position from the trigger button so the menu escapes
+        // any overflow:auto ancestor (the table container).
+        const btn = event.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        this.dropdownPosition = {
+            top: rect.bottom + 4,
+            right: window.innerWidth - rect.right
+        };
+        this.openDropdownId = id;
     }
     closeDropdown() {
         this.openDropdownId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, deps: [{ token: i3.HttpClient }, { token: i1$4.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\" *ngIf=\"openDropdownId === (rowIndex + '-' + i)\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n</div>\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:auto;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{position:absolute;top:100%;right:0;min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:1000;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888)}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SmartTableComponent, isStandalone: false, selector: "lib-smart-table", inputs: { config: "config", tableData: "tableData", totalItemsCount: "totalItemsCount" }, outputs: { action: "action", topAction: "topAction", filterChange: "filterChange", rowSelect: "rowSelect", columnClick: "columnClick", sortChange: "sortChange", pageChange: "pageChange", searchChange: "searchChange" }, host: { listeners: { "document:click": "closeDropdown()" } }, viewQueries: [{ propertyName: "stickyHeaders", predicate: ["stickyHeader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PaginationComponent, selector: "lib-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "pageSizeOptions", "theme", "labels"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: ConfirmationModalComponent, selector: "cc-confirmation-modal", inputs: ["config", "isOpen", "confirmDisabled", "confirmLoading"], outputs: ["confirm", "cancel", "close", "showCodeSnippet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\" *ngIf=\"openDropdownId === (rowIndex + '-' + i)\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n</div>\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:auto;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{position:absolute;top:100%;right:0;min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:1000;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888)}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lib-smart-table', standalone: false, template: "<div class=\"smart-table-wrapper\">\n  <!-- Top Toolbar -->\n  <div class=\"st-toolbar\" *ngIf=\"config.searchConfig?.enabled || (config.filters && config.filters.length > 0) || (config.topBarButtons && config.topBarButtons.length > 0)\">\n    \n    <!-- Search -->\n    <div class=\"st-search\" *ngIf=\"config.searchConfig?.enabled\">\n      <i class=\"fa fa-search\"></i>\n      <input type=\"text\" [placeholder]=\"config.labels?.searchPlaceholder || 'Search'\" (input)=\"onSearch($event)\">\n    </div>\n\n    <!-- Filters -->\n    <div class=\"st-filters\" *ngIf=\"config.filters\">\n      <div class=\"st-filter-item\" *ngFor=\"let filter of config.filters\">\n        <select (change)=\"onFilterChange(filter.key, $event)\">\n          <option value=\"\">{{ filter.label }}</option>\n          <option *ngFor=\"let opt of filter.options\" [value]=\"opt.value\">{{ opt.label }}</option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Top Bar Buttons -->\n    <div class=\"st-actions\" *ngIf=\"config.topBarButtons\">\n      <lib-button *ngFor=\"let btn of config.topBarButtons\" \n                  [variant]=\"btn.btnVariant || 'primary'\"\n                  [icon]=\"btn.icon || ''\"\n                  (click)=\"onTopAction(btn)\">\n        {{ btn.label }}\n      </lib-button>\n    </div>\n  </div>\n\n  <!-- Table Container -->\n  <div class=\"st-table-container\">\n    <div class=\"st-check-loader\" *ngIf=\"loading\">\n        <div class=\"spinner\"></div>\n    </div>\n    <table class=\"st-table\" [class.loading-data]=\"loading\">\n      <thead>\n        <tr>\n          <th *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" (change)=\"onSelectAll($event)\">\n          </th>\n          <th *ngFor=\"let col of config.columns\" \n              #stickyHeader\n              [class.sortable]=\"col.sortable\"\n              [class.sticky-col]=\"col.sticky\"\n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              (click)=\"onSort(col)\">\n            {{ col.label }}\n            <span *ngIf=\"col.sortable\" class=\"sort-icon\">\n              <i class=\"fa\" [ngClass]=\"getSortIcon(col.key)\"></i>\n            </span>\n          </th>\n          <th *ngIf=\"config.actions && config.actions.length > 0\">{{ config.labels?.actionColumnHeader || 'Actions' }}</th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr *ngFor=\"let row of data; let rowIndex = index\">\n          <td *ngIf=\"config.selectable\" class=\"st-checkbox-col\">\n            <input type=\"checkbox\" [(ngModel)]=\"row.selected\" (change)=\"onRowSelect(row)\">\n          </td>\n          <td *ngFor=\"let col of config.columns\" \n              [class.sticky-col]=\"col.sticky\" \n              [ngStyle]=\"stickyColumnStyles[col.key]\"\n              [class.clickable-cell]=\"col.clickAction\"\n              (click)=\"onColumnClick(row, col)\">\n            <!-- Text/Number/Date -->\n            <span *ngIf=\"col.type !== 'custom' && col.type !== 'html' && col.type !== 'badge'\">\n              {{ getCellValue(row, col) }}\n            </span>\n            <!-- HTML -->\n             <div *ngIf=\"col.type === 'html'\" [innerHTML]=\"getCellValue(row, col)\"></div>\n             <!-- Badge -->\n             <span *ngIf=\"col.type === 'badge'\" class=\"st-badge\" [ngClass]=\"getBadgeClass(row, col)\">\n                 {{ getCellValue(row, col) }}\n             </span>\n          </td>\n          \n          <!-- Row Actions -->\n          <td *ngIf=\"config.actions && config.actions.length > 0\" class=\"st-row-actions\">\n            <div class=\"action-buttons\">\n                <ng-container *ngFor=\"let action of config.actions; let i = index\">\n                    <ng-container *ngIf=\"action.type === 'dropdown'\">\n                        <div class=\"st-dropdown-container\" (click)=\"$event.stopPropagation()\">\n                            <button class=\"st-dropdown-btn\" (click)=\"toggleDropdown(rowIndex + '-' + i, $event)\">\n                                <i [class]=\"action.icon || 'fa fa-ellipsis-h'\"></i>\n                            </button>\n                            <div class=\"st-dropdown-menu\"\n                                 *ngIf=\"openDropdownId === (rowIndex + '-' + i)\"\n                                 [ngStyle]=\"{\n                                   position: 'fixed',\n                                   top: dropdownPosition.top + 'px',\n                                   right: dropdownPosition.right + 'px',\n                                   left: 'auto'\n                                 }\">\n                                <button class=\"st-dropdown-item\" *ngFor=\"let item of action.items\" (click)=\"onActionItemClick(item, row, $event); closeDropdown()\">\n                                    <i *ngIf=\"item.icon\" [class]=\"item.icon + ' st-action-icon'\"></i>\n                                    <span>{{ item.label }}</span>\n                                </button>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <ng-container *ngIf=\"action.type !== 'dropdown'\">\n                      <lib-button \n                         [variant]=\"action.btnVariant || 'secondary'\"\n                         [icon]=\"action.icon || ''\"\n                         (click)=\"onAction(action, row)\">\n                         {{ action.label }}\n                     </lib-button>\n                    </ng-container>\n                </ng-container>\n            </div>\n          </td>\n        </tr>\n        <tr *ngIf=\"data.length === 0 && !loading\">\n            <td [attr.colspan]=\"columnCount + (config.selectable ? 1 : 0) + (config.actions ? 1 : 0)\" class=\"no-data\">\n                {{ config.labels?.noDataMessage || 'No data available' }}\n            </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <div class=\"st-pagination\" *ngIf=\"config.pagination && config.pagination.enabled\">\n    <lib-pagination\n      [totalItems]=\"totalItems\"\n      [itemsPerPage]=\"config.pagination.pageSize\"\n      [currentPage]=\"currentPage\"\n      [pageSizeOptions]=\"config.pagination.pageSizeOptions\"\n      (pageChange)=\"onPageChange($event)\"\n      (itemsPerPageChange)=\"onPageSizeChange($event)\">\n    </lib-pagination>\n  </div>\n\n  <!-- Built-in Delete Confirmation Modal -->\n  <cc-confirmation-modal\n    [isOpen]=\"deleteModalOpen\"\n    [config]=\"deleteModalConfig\"\n    (confirm)=\"onDeleteConfirm()\"\n    (cancel)=\"onDeleteCancel()\"\n    (close)=\"onDeleteCancel()\">\n    <p>{{ deleteModalMessage }}</p>\n  </cc-confirmation-modal>\n</div>\n\n", styles: [".smart-table-wrapper{margin:var(--st-margin, 1.5rem 0);font-family:var(--st-font-family, \"Roboto\", sans-serif);background:var(--st-table-bg, #fff);border-radius:var(--st-border-radius, 8px);box-shadow:var(--st-box-shadow, 0 2px 4px rgba(0, 0, 0, .05));display:flex;flex-direction:column;gap:0;padding:0;border:var(--st-table-border, 1px solid #e0e0e0);overflow:hidden}.st-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:var(--st-toolbar-padding, 1rem);background:var(--st-toolbar-bg, #fff);border-bottom:var(--st-toolbar-border-bottom, 1px solid #eee);gap:var(--st-toolbar-gap, 1rem)}.st-toolbar .st-search{position:relative;width:var(--st-search-width, auto)}.st-toolbar .st-search input{padding:var(--st-search-padding, .5rem .5rem .5rem 2rem);border:var(--st-search-border, 1px solid #ccc);border-radius:var(--st-search-radius, 4px);background:var(--st-search-bg, #fff);font-size:var(--st-font-size, 14px);width:100%;color:var(--st-text-color, #333)}.st-toolbar .st-search i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--st-search-icon-color, #999)}.st-toolbar .st-filters{display:flex;gap:1rem}.st-toolbar .st-filters select{padding:var(--st-filter-padding, .5rem);border:var(--st-filter-border, 1px solid #ccc);border-radius:var(--st-filter-radius, 4px);font-size:var(--st-filter-font-size, 14px);background:var(--st-filter-bg, #fff);color:var(--st-filter-color, #333)}.st-toolbar .st-actions{display:flex;gap:.5rem}.st-table-container{overflow-x:auto;overflow-y:visible;padding:var(--st-table-padding, 1rem)}.st-table-container::-webkit-scrollbar{width:var(--st-scrollbar-width, 8px);height:var(--st-scrollbar-height, 8px)}.st-table-container::-webkit-scrollbar-track{background:var(--st-scrollbar-track-bg, #f1f1f1);border-radius:var(--st-scrollbar-track-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb{background:var(--st-scrollbar-thumb-bg, #c1c1c1);border-radius:var(--st-scrollbar-thumb-radius, 4px)}.st-table-container::-webkit-scrollbar-thumb:hover{background:var(--st-scrollbar-thumb-hover-bg, #a8a8a8)}.st-table-container.has-sticky-header .st-table thead th{position:sticky;top:0;z-index:10;background:var(--st-header-bg, #f9f9f9);box-shadow:0 1px 2px -1px #0000001a}.st-table-container table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--st-font-size, 14px)}.st-table-container table thead{background:var(--st-header-bg, #f9f9f9)}.st-table-container table thead th{padding:.75rem 1rem;text-align:left;color:var(--st-header-color, #333);font-weight:var(--st-header-weight, 500);font-size:var(--st-header-size, 14px);text-transform:var(--st-header-transform, none);border-bottom:var(--st-header-border, 1px solid #eee);white-space:nowrap}.st-table-container table thead th.sortable{cursor:pointer}.st-table-container table thead th.sortable:hover{opacity:.8}.st-table-container table thead th .sort-icon{margin-left:.5rem}.st-table-container table thead th .sort-icon .sort-icon{margin-left:.5rem;font-size:var(--st-sort-icon-size, .8em)}.st-table-container table thead th.st-checkbox-col{width:40px}.st-table-container table thead th.sticky-col{position:sticky;z-index:3;background:var(--st-header-bg, #f9f9f9);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table thead th.sticky-col:first-child{left:0}.st-table-container table tbody tr{background:var(--st-row-bg, #fff)}.st-table-container table tbody tr td{padding:var(--st-cell-padding, 1rem);color:var(--st-text-color, #333);vertical-align:middle;border-bottom:var(--st-row-border, 1px solid #eee)}.st-table-container table tbody tr td.sticky-col{position:sticky;z-index:2;background:var(--st-row-bg, #fff);box-shadow:var(--st-sticky-shadow, 2px 0 5px -2px rgba(0, 0, 0, .1));border-right:var(--st-sticky-border-right, 1px solid rgba(0, 0, 0, .05))}.st-table-container table tbody tr td.sticky-col:first-child{left:0}.st-table-container table tbody tr:hover td,.st-table-container table tbody tr:hover td.sticky-col{background:var(--st-row-hover-bg, #f9f9f9)}.st-table-container table tbody tr.selected td,.st-table-container table tbody tr.selected td.sticky-col{background:var(--st-row-selected-bg, #f3e5f5)}.st-table-container table tbody tr .clickable-cell{cursor:pointer;transition:background .2s}.st-table-container table tbody tr .clickable-cell:hover{background:var(--st-cell-hover-bg, #f0f0f0)!important}input[type=checkbox]{accent-color:var(--st-checkbox-color, #6200EE);width:var(--st-checkbox-size, 16px);height:var(--st-checkbox-size, 16px);cursor:pointer}.st-badge{display:inline-block;padding:var(--st-badge-padding, 4px 12px);border-radius:var(--st-badge-radius, 12px);font-size:var(--st-badge-font-size, 12px);font-weight:var(--st-badge-font-weight, 500);text-align:center;white-space:nowrap}.st-badge.badge-success{background:var(--st-badge-success-bg, #e8f5e9);color:var(--st-badge-success-color, #2e7d32)}.st-badge.badge-warning{background:var(--st-badge-warning-bg, #fff3e0);color:var(--st-badge-warning-color, #ef6c00)}.st-badge.badge-danger{background:var(--st-badge-danger-bg, #ffebee);color:var(--st-badge-danger-color, #c62828)}.st-badge.badge-info{background:var(--st-badge-info-bg, #e3f2fd);color:var(--st-badge-info-color, #1565c0)}.st-badge.badge-neutral{background:var(--st-badge-neutral-bg, #f5f5f5);color:var(--st-badge-neutral-color, #616161)}.st-row-actions .action-buttons{display:flex;gap:.5rem;align-items:center}.st-action-icon{margin-right:var(--st-action-icon-margin, 8px)}.st-dropdown-container{position:relative;display:inline-block}.st-dropdown-btn{background:transparent;border:none;cursor:pointer;font-size:1.1rem;padding:4px 8px;color:var(--st-text-color, #333);border-radius:4px}.st-dropdown-btn:hover{background:#0000000d}.st-dropdown-menu{min-width:150px;background:var(--st-card-bg, #fff);border:1px solid var(--border-color, #e0e0e0);border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:9999;display:flex;flex-direction:column;padding:4px 0;margin-top:4px}.st-dropdown-item{background:transparent;border:none;padding:8px 16px;text-align:left;cursor:pointer;display:flex;align-items:center;font-size:14px;color:var(--st-text-color, #333);transition:background .2s}.st-dropdown-item:hover{background:#0000000d}.st-dropdown-item .st-action-icon{margin-right:8px;width:16px;text-align:center}.no-data{padding:2rem;color:var(--st-no-data-color, #888);text-align:center}.st-pagination{padding:var(--st-pagination-padding, 1rem);border-top:var(--st-pagination-border-top, none)}@media(max-width:768px){.st-toolbar{flex-direction:column;align-items:stretch}.st-toolbar .st-search,.st-toolbar .st-filters,.st-toolbar .st-actions,.st-toolbar .st-search input{width:100%}}.st-table-container{position:relative;min-height:200px}.st-table-container .st-table.loading-data{opacity:.5;pointer-events:none}.st-table-container .st-check-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10}.st-table-container .st-check-loader .spinner{width:40px;height:40px;border:4px solid var(--st-spinner-border-color, rgba(0, 0, 0, .1));border-left-color:var(--st-loader-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { config: [{
                 type: Input
+            }], tableData: [{
+                type: Input
+            }], totalItemsCount: [{
+                type: Input
             }], action: [{
                 type: Output
             }], topAction: [{
@@ -9816,6 +10154,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], columnClick: [{
                 type: Output
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
             }], stickyHeaders: [{
                 type: ViewChildren,
                 args: ['stickyHeader']
@@ -9830,12 +10174,14 @@ class SmartTableModule {
             FormsModule,
             PaginationModule,
             ButtonModule,
-            MaterialModule], exports: [SmartTableComponent] });
+            MaterialModule,
+            ConfirmationModalModule], exports: [SmartTableComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, imports: [CommonModule,
             FormsModule,
             PaginationModule,
             ButtonModule,
-            MaterialModule] });
+            MaterialModule,
+            ConfirmationModalModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartTableModule, decorators: [{
             type: NgModule,
@@ -9848,7 +10194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FormsModule,
                         PaginationModule,
                         ButtonModule,
-                        MaterialModule
+                        MaterialModule,
+                        ConfirmationModalModule
                     ],
                     exports: [
                         SmartTableComponent