commons-shared-web-ui 0.0.25 → 0.0.27

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

@@ -2316,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();
     /**
@@ -2419,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 => {
@@ -2860,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", 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\">\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: [{
@@ -2875,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: [{
@@ -5137,7 +5147,7 @@ class FormSchemaTreeService {
                     label: schema.label || 'Form',
                     groupFieldConfig: null,
                     enabled: true,
-                    expanded: true,
+                    expanded: true, // Collapse by default for better UX
                     sections: this._buildSectionsFromChildren(schema.sectionConfig.children),
                 }];
         }
@@ -5427,7 +5437,7 @@ class FormSchemaTreeService {
             label: groupField.sectionConfig?.label || groupField.label || groupField.name || 'Group',
             groupFieldConfig: groupField,
             enabled: groupField.isEnabled ?? groupField.visible ?? true,
-            expanded: groupField.isEnabled ?? groupField.visible ?? true,
+            expanded: true, // Collapse by default for better UX - user can expand as needed
             sections,
         };
     }
@@ -5486,7 +5496,7 @@ class FormSchemaTreeService {
             sectionConfig: field.sectionConfig ?? null,
             parentFieldConfig: field,
             enabled: isVisible && field.disabled !== true,
-            expanded: isVisible,
+            expanded: false, // Collapse by default for better UX - user can expand as needed
             fields,
             subsections,
         };
@@ -5497,7 +5507,7 @@ class FormSchemaTreeService {
             sectionConfig: null,
             parentFieldConfig: null,
             enabled: true,
-            expanded: true,
+            expanded: false, // Collapse by default for better UX - user can expand as needed
             fields,
             subsections: [],
         };
@@ -5742,8 +5752,25 @@ class FieldSelectionService {
         const groups = this.treeService.parseSchemaToSelectionGroups(schema);
         this._state.set({ groups, originalSchema: schema });
     }
+    /**
+     * Load a schema while preserving the expanded/collapsed state of sections and groups.
+     * Used when the schema structure hasn't changed but field selections have.
+     * This prevents the UI from unexpectedly collapsing sections when the user toggles a field.
+     */
+    loadSchemaPreservingExpanded(schema) {
+        const oldGroups = this._state().groups;
+        const newGroups = this.treeService.parseSchemaToSelectionGroups(schema);
+        // Merge old expansion states into new groups
+        const mergedGroups = newGroups.map((newGroup, gi) => ({
+            ...newGroup,
+            expanded: oldGroups[gi]?.expanded ?? newGroup.expanded,
+            sections: this._mergeExpandedSections(newGroup.sections, oldGroups[gi]?.sections ?? []),
+        }));
+        this._state.set({ groups: mergedGroups, originalSchema: schema });
+    }
     /**
      * Toggle a group's enabled state. Disabling cascades to all sections + fields.
+     * When enabling, all fields are selected (unless locked).
      */
     toggleGroup(groupIndex) {
         this._state.update(s => ({
@@ -5756,6 +5783,7 @@ class FieldSelectionService {
                     ...g,
                     enabled,
                     sections: enabled ? g.sections : this._disableAllSections(g.sections),
+                    // sections: enabled ? this._enableAllSections(g.sections) : this._disableAllSections(g.sections),
                 };
             }),
         }));
@@ -5836,6 +5864,18 @@ class FieldSelectionService {
             subsections: this._disableAllSections(s.subsections),
         }));
     }
+    /**
+     * Enable all sections and their fields (except locked ones).
+     * Used when toggling a section/group back ON to restore field selections.
+     */
+    _enableAllSections(sections) {
+        return sections.map(s => ({
+            ...s,
+            enabled: true,
+            fields: s.fields.map(f => ({ ...f, selected: !f.isLocked })),
+            subsections: this._enableAllSections(s.subsections),
+        }));
+    }
     _toggleSectionAtPath(sections, path, depth) {
         return sections.map((s, i) => {
             if (i !== path[depth])
@@ -5846,8 +5886,10 @@ class FieldSelectionService {
                 return {
                     ...s,
                     enabled,
-                    fields: enabled ? s.fields : s.fields.map(f => ({ ...f, selected: false })),
-                    subsections: enabled ? s.subsections : this._disableAllSections(s.subsections),
+                    // When enabling: select all non-locked fields and enable subsections
+                    // When disabling: deselect all fields and disable subsections
+                    fields: enabled ? s.fields.map(f => ({ ...f, selected: !f.isLocked })) : s.fields.map(f => ({ ...f, selected: false })),
+                    subsections: enabled ? this._enableAllSections(s.subsections) : this._disableAllSections(s.subsections),
                 };
             }
             // Recurse into subsections
@@ -5888,6 +5930,20 @@ class FieldSelectionService {
             };
         });
     }
+    /**
+     * Recursively merge expansion state from old sections into new sections.
+     * Preserves which sections were expanded/collapsed by the user.
+     */
+    _mergeExpandedSections(newSections, oldSections) {
+        return newSections.map((newSection, ni) => {
+            const oldSection = oldSections[ni];
+            return {
+                ...newSection,
+                expanded: oldSection?.expanded ?? newSection.expanded,
+                subsections: this._mergeExpandedSections(newSection.subsections, oldSection?.subsections ?? []),
+            };
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FieldSelectionService });
 }
@@ -5895,26 +5951,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();
@@ -5953,11 +6064,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}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.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}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.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}@media(max-width:640px){.fb-selection-section__expand-btn{padding: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}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.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}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.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)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}\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}@media(max-width:640px){.fb-selection-section{border-radius:6px}}.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}@media(max-width:640px){.fb-selection-section__header{padding:8px 10px;gap:6px}}.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}@media(max-width:640px){.fb-selection-section__expand-btn{padding: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}@media(max-width:640px){.fb-selection-section__meta{gap:6px}}.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}@media(max-width:640px){.fb-selection-section__label{font-size:12px}}.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)}@media(max-width:768px){.fb-selection-section__body{padding:4px 12px 12px 24px;gap:5px}}@media(max-width:640px){.fb-selection-section__body{padding:4px 10px 10px 20px;gap:4px}}\n"] }]
         }], propDecorators: { section: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5966,6 +6077,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: [{
@@ -5977,6 +6090,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();
@@ -5998,17 +6113,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}@media(max-width:640px){.fb-group-node{border-radius:8px}}.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}@media(max-width:640px){.fb-group-node__header{padding:12px;gap:8px}}.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}@media(max-width:640px){.fb-group-node__expand-btn{padding: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}@media(max-width:640px){.fb-group-node__meta{gap:6px}}.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}@media(max-width:640px){.fb-group-node__label{font-size:13px}}.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)}@media(max-width:768px){.fb-group-node__body{padding:0 12px 12px 24px;gap:10px}}@media(max-width:640px){.fb-group-node__body{padding:0 12px 12px 20px;gap:8px}}\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}@media(max-width:640px){.fb-group-node{border-radius:8px}}.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}@media(max-width:640px){.fb-group-node__header{padding:12px;gap:8px}}.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}@media(max-width:640px){.fb-group-node__expand-btn{padding: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}@media(max-width:640px){.fb-group-node__meta{gap:6px}}.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}@media(max-width:640px){.fb-group-node__label{font-size:13px}}.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)}@media(max-width:768px){.fb-group-node__body{padding:0 12px 12px 24px;gap:10px}}@media(max-width:640px){.fb-group-node__body{padding:0 12px 12px 20px;gap:8px}}\n"] }]
         }], propDecorators: { group: [{
                 type: Input,
                 args: [{ required: true }]
             }], groupIndex: [{
                 type: Input,
                 args: [{ required: true }]
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }], toggleEnabled: [{
                 type: Output
             }], toggleExpanded: [{
@@ -6024,10 +6141,31 @@ 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);
+    /**
+     * Flag to track if the next schema change is from internal toggles.
+     * When true, we'll use loadSchemaPreservingExpanded() to keep user's expansion state.
+     */
+    _isInternalChange = false;
     ngOnChanges(changes) {
         if (changes['schema'] && this.schema) {
-            this.store.loadSchema(this.schema);
+            // If schema changed from our internal toggles, preserve expansion state
+            // Otherwise, treat it as external schema change and reload fully
+            if (this._isInternalChange) {
+                this.store.loadSchemaPreservingExpanded(this.schema);
+                this._isInternalChange = false;
+            }
+            else {
+                this.store.loadSchema(this.schema);
+            }
         }
     }
     onToggleGroup(groupIndex) {
@@ -6054,20 +6192,25 @@ class FieldSelectionComponent {
     _emitChange() {
         const updated = this.store.buildUpdatedSchema();
         if (updated) {
+            // Mark that the next schema change is from internal toggles
+            // This prevents expansion state from being reset
+            this._isInternalChange = true;
             this.schemaChange.emit(updated);
         }
     }
     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)}@media(max-width:768px){.fb-field-selection{gap:12px;padding:12px}}@media(max-width:640px){.fb-field-selection{gap:8px;padding:8px}}.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}@media(max-width:1024px){.fb-field-selection__empty{padding:32px 16px;font-size:13px}}@media(max-width:640px){.fb-field-selection__empty{padding:24px 12px;font-size:12px}}\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)}@media(max-width:768px){.fb-field-selection{gap:12px;padding:12px}}@media(max-width:640px){.fb-field-selection{gap:8px;padding:8px}}.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}@media(max-width:1024px){.fb-field-selection__empty{padding:32px 16px;font-size:13px}}@media(max-width:640px){.fb-field-selection__empty{padding:24px 12px;font-size:12px}}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], schemaChange: [{
                 type: Output
+            }], hideToggleForOptionTypes: [{
+                type: Input
             }] } });
 
 /**
@@ -6298,33 +6441,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.
@@ -6342,10 +6458,10 @@ const F = {
     className: { name: 'className', type: 'TEXT_INPUT', label: 'CSS Class', placeholder: 'e.g. custom-class', colSpan: 6 },
     errorMessage: { name: 'errorMessage', type: 'TEXT_INPUT', label: 'Custom Error Message', placeholder: 'e.g. This field is required', colSpan: 12 },
     visibilityExpression: { name: 'visibilityExpression', type: 'TEXT_INPUT', label: 'Visibility Expression', placeholder: 'e.g. data.age > 18', colSpan: 12, hint: 'Show/hide this field conditionally based on other field values' },
-    isEnabled: { name: 'isEnabled', type: 'SWITCH', label: 'Is Enabled', colSpan: 3, defaultValue: true },
-    required: { name: 'required', type: 'SWITCH', label: 'Required', colSpan: 3 },
-    readonly: { name: 'readonly', type: 'SWITCH', label: 'Read Only', colSpan: 3 },
-    disabled: { name: 'disabled', type: 'SWITCH', label: 'Disabled', colSpan: 3 },
+    isEnabled: { name: 'isEnabled', type: 'SWITCH', label: 'Is Enabled', colSpan: 6, defaultValue: true },
+    required: { name: 'required', type: 'SWITCH', label: 'Required', colSpan: 6 },
+    readonly: { name: 'readonly', type: 'SWITCH', label: 'Read Only', colSpan: 6 },
+    disabled: { name: 'disabled', type: 'SWITCH', label: 'Disabled', colSpan: 6 },
     type: {
         name: 'type',
         type: 'DROPDOWN',
@@ -6374,20 +6490,15 @@ function row(...children) {
 // COMMON SECTIONS (shared across multiple types)
 // ─────────────────────────────────────────────────────────────────────────────
 const BASE_SECTION_NO_TYPE = section('Basic Settings', [
-    F.label,
-    row(F.name, F.colSpan),
-    row(F.defaultValue, F.placeholder),
-    F.hint,
+    row(F.label, F.name, F.colSpan, F.defaultValue, F.placeholder, F.hint),
 ]);
 const BASE_SECTION = section('Basic Settings', [
-    F.label,
     // row(F.name, F.type),
-    row(F.name, F.colSpan),
-    row(F.defaultValue, F.placeholder),
-    F.hint,
+    row(F.label, F.name, F.colSpan, F.defaultValue, F.placeholder, F.hint),
 ]);
 const FLAGS_SECTION = section('Field State', [
-    row(F.isEnabled, F.required, F.readonly, F.disabled),
+    row(F.isEnabled, F.required),
+    row(F.readonly, F.disabled),
 ]);
 const ADVANCED_SECTION = section('Advanced', [
     F.visibilityExpression,
@@ -6666,11 +6777,11 @@ class ConfiguratorTreeComponent {
         return a.every((v, i) => v === b[i]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorTreeComponent, isStandalone: false, selector: "lib-configurator-tree", inputs: { tree: "tree", selectedFieldPath: "selectedFieldPath" }, outputs: { selectField: "selectField", toggleExpanded: "toggleExpanded" }, ngImport: i0, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\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          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\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              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}.fb-cfg-tree-section{margin-bottom:16px}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConfiguratorTreeComponent, isStandalone: false, selector: "lib-configurator-tree", inputs: { tree: "tree", selectedFieldPath: "selectedFieldPath" }, outputs: { selectField: "selectField", toggleExpanded: "toggleExpanded" }, ngImport: i0, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\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          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\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              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-configurator-tree', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\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          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\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              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}.fb-cfg-tree-section{margin-bottom:16px}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"] }]
+            args: [{ selector: 'lib-configurator-tree', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fb-cfg-tree\">\r\n  <div class=\"fb-cfg-tree__header\">\r\n    <h4 class=\"fb-cfg-tree__title\">Field Tree</h4>\r\n    <p class=\"fb-cfg-tree__subtitle\">Select a field to configure</p>\r\n  </div>\r\n\r\n  <div class=\"fb-cfg-tree__scrollable\">\r\n    @for (node of tree; track trackByNodeId($index, node)) {\r\n      <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: node, depth: 0 }\"></ng-container>\r\n    }\r\n\r\n    @if (tree.length === 0) {\r\n      <div class=\"fb-cfg-tree__empty\">\r\n        No fields to configure.\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Recursive tree node template -->\r\n<ng-template #treeNodeTpl let-node let-depth=\"depth\">\r\n  @if (node.type === 'field') {\r\n    <!-- Field node (clickable leaf) -->\r\n    <div\r\n      class=\"fb-cfg-tree-item\"\r\n      [class.fb-cfg-tree-item--active]=\"isSelected(node)\"\r\n      (click)=\"onFieldSelect(node)\"\r\n      [style.padding-left.px]=\"16 + depth * 16\"\r\n    >\r\n      <span class=\"fb-cfg-tree-item__drag\" title=\"Drag to reorder\">\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          <circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"12\" r=\"1\"/>\r\n          <circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/>\r\n          <circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>\r\n        </svg>\r\n      </span>\r\n      <div class=\"fb-cfg-tree-item__content\">\r\n        <span class=\"fb-cfg-tree-item__label\">{{ node.label }}</span>\r\n        @if (node.fieldConfig?.type) {\r\n          <span class=\"fb-cfg-tree-item__type\">{{ node.fieldConfig.type }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <!-- Group or Section node (expandable) -->\r\n    <div\r\n      class=\"fb-cfg-tree-section\"\r\n      [style.padding-left.px]=\"8 + depth * 12\"\r\n    >\r\n      <div class=\"fb-cfg-tree-section__header\" (click)=\"onNodeClick(node)\">\r\n        <div class=\"fb-cfg-tree-section__title-group\">\r\n          <span\r\n            class=\"fb-cfg-tree-section__chevron\"\r\n            [class.fb-cfg-tree-section__chevron--expanded]=\"node.expanded\"\r\n          >\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              <polyline points=\"9 18 15 12 9 6\"></polyline>\r\n            </svg>\r\n          </span>\r\n          <span class=\"fb-cfg-tree-section__label\">{{ node.label }}</span>\r\n        </div>\r\n      </div>\r\n\r\n      @if (node.expanded && node.children.length > 0) {\r\n        <div class=\"fb-cfg-tree-section__children\">\r\n          @for (child of node.children; track trackByNodeId($index, child)) {\r\n            <ng-container *ngTemplateOutlet=\"treeNodeTpl; context: { $implicit: child, depth: depth + 1 }\"></ng-container>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree{display:flex;flex-direction:column;height:100%;overflow:hidden}.fb-cfg-tree__header{padding:16px 20px;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-tree-header-bg, #ffffff);flex-shrink:0}@media(max-width:768px){.fb-cfg-tree__header{padding:12px 16px}}@media(max-width:640px){.fb-cfg-tree__header{padding:10px 12px}}.fb-cfg-tree__title{margin:0;font-size:14px;font-weight:700;color:var(--fb-fc-tree-title-color, #111827)}@media(max-width:640px){.fb-cfg-tree__title{font-size:13px}}.fb-cfg-tree__subtitle{margin:4px 0 0;font-size:11px;color:var(--fb-fc-tree-subtitle-color, #6b7280);letter-spacing:.02em}@media(max-width:640px){.fb-cfg-tree__subtitle{font-size:10px}}.fb-cfg-tree__scrollable{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px}@media(max-width:768px){.fb-cfg-tree__scrollable{padding:12px}}@media(max-width:640px){.fb-cfg-tree__scrollable{padding:8px}}.fb-cfg-tree__empty{padding:32px 16px;text-align:center;color:var(--fb-fc-empty-color, #9ca3af);font-size:13px}@media(max-width:640px){.fb-cfg-tree__empty{padding:24px 12px;font-size:12px}}.fb-cfg-tree-section{margin-bottom:16px}@media(max-width:768px){.fb-cfg-tree-section{margin-bottom:12px}}@media(max-width:640px){.fb-cfg-tree-section{margin-bottom:8px}}.fb-cfg-tree-section__header{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 8px;border-bottom:1px solid var(--fb-fc-section-divider, #f3f4f6);margin-bottom:8px;cursor:pointer}@media(max-width:640px){.fb-cfg-tree-section__header{padding:3px 6px 6px;margin-bottom:6px}}.fb-cfg-tree-section__header:hover{background:var(--fb-fc-section-hover, #f9fafb);border-radius:6px}.fb-cfg-tree-section__title-group{display:flex;align-items:center;gap:6px}@media(max-width:640px){.fb-cfg-tree-section__title-group{gap:4px}}.fb-cfg-tree-section__chevron{display:flex;color:var(--fb-fc-chevron-color, #9ca3af);transition:transform .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-section__chevron--expanded{transform:rotate(90deg)}.fb-cfg-tree-section__label{font-size:13px;font-weight:700;color:var(--fb-fc-section-label-color, #111827);text-transform:uppercase;letter-spacing:.05em}@media(max-width:640px){.fb-cfg-tree-section__label{font-size:12px;letter-spacing:.02em}}.fb-cfg-tree-section__children{display:flex;flex-direction:column;gap:8px}@media(max-width:640px){.fb-cfg-tree-section__children{gap:6px}}.fb-cfg-tree-item{display:flex;align-items:center;padding:12px;background:var(--fb-fc-item-bg, #ffffff);border:1px solid var(--fb-fc-item-border, #e5e7eb);border-radius:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.fb-cfg-tree-item:hover{border-color:var(--fb-fc-item-hover-border, #3b82f6);box-shadow:0 2px 8px #3b82f614}.fb-cfg-tree-item--active{border-color:var(--fb-fc-item-active-border, #3b82f6);background:var(--fb-fc-item-active-bg, #f0f7ff);box-shadow:0 0 0 1px var(--fb-fc-item-active-border, #3b82f6)}.fb-cfg-tree-item__drag{color:var(--fb-fc-drag-color, #d1d5db);cursor:grab;margin-right:8px;display:flex}.fb-cfg-tree-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fb-cfg-tree-item__label{font-size:13px;font-weight:600;color:var(--fb-fc-item-label-color, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fb-cfg-tree-item__type{font-size:10px;color:var(--fb-fc-item-type-color, #6b7280);text-transform:uppercase;letter-spacing:.05em;font-weight:500}\n"] }]
         }], propDecorators: { tree: [{
                 type: Input
             }], selectedFieldPath: [{
@@ -6683,8 +6794,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class ConfiguratorConfigPanelComponent {
     cdr;
-    constructor(cdr) {
+    snackbarService;
+    constructor(cdr, snackbarService) {
         this.cdr = cdr;
+        this.snackbarService = snackbarService;
     }
     selectedField = null;
     selectedFieldInfo = null;
@@ -6692,6 +6805,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 = '';
@@ -6749,6 +6868,9 @@ class ConfiguratorConfigPanelComponent {
                 this.typeChange.emit(this.currentBuilderType);
             }
             this.configChange.emit(patch);
+            // Show success notification to user
+            const fieldLabel = this.selectedField?.label || this.selectedField?.name || 'Field';
+            this.snackbarService.success(`${fieldLabel} configuration updated successfully`);
         }
     }
     // ─── Private: Build the config form JSON ─────────────────────────────────
@@ -6760,13 +6882,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();
@@ -6779,6 +6905,68 @@ class ConfiguratorConfigPanelComponent {
             this.cdr.detectChanges();
         });
     }
+    /**
+     * Deep-clones the schema and removes any field whose `name` matches developer-only fields.
+     * This prevents end users from modifying system-level configurations like:
+     * - optionConfig.* (API URLs, data paths, etc.)
+     * - payloadPath (payload mapping)
+     * - className (CSS styling)
+     * - name (system identifier)
+     *
+     * Also removes entire sections that become empty after filtering.
+     */
+    _filterSchemaForOptionConfig(schema) {
+        // List of developer-only field names that should be hidden from end users
+        const DEVELOPER_ONLY_FIELDS = [
+            'payloadPath', // Payload mapping configuration
+            'className', // CSS class for styling
+            'name', // System field identifier
+        ];
+        const isDeveloperOnlyField = (f) => {
+            if (typeof f?.name !== 'string')
+                return false;
+            // Hide optionConfig.* fields (API URL, data path, label path, etc.)
+            if (f.name.startsWith('optionConfig.'))
+                return true;
+            // Hide other developer-only fields
+            if (DEVELOPER_ONLY_FIELDS.includes(f.name))
+                return true;
+            return false;
+        };
+        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) => !isDeveloperOnlyField(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 (isDeveloperOnlyField(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 = {};
@@ -6943,13 +7131,13 @@ 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", "fileAdded", "fileUploadFinished", "fileRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorConfigPanelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SnackbarService }], 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", 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;--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: 12px;--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: 12px;--cc-sf-label-size: .75rem;--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: .5rem .75rem;--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}@media(min-width:600px){.fb-config-panel{--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: 14px;--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: 14px;--cc-sf-label-size: .8rem;--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: .5rem .75rem;--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}}@media(min-width:768px){.fb-config-panel{--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: 16px;--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}}@media(min-width:1024px){.fb-config-panel{--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: 16px;--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}}@media(min-width:1440px){.fb-config-panel{--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: 18px;--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: 18px;--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}}@media(min-width:1920px){.fb-config-panel{--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: 18px;--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: 18px;--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__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 24px}@media(max-width:640px){.fb-config-panel__empty{padding:24px 16px}}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}@media(max-width:640px){.fb-config-panel__empty-icon{margin-bottom:16px}}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}@media(max-width:640px){.fb-config-panel__empty-text{font-size:14px;max-width:100%}}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:1.4rem;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}@media(max-width:768px){.fb-config-panel__header{padding:16px 24px;gap:12px}}@media(max-width:640px){.fb-config-panel__header{padding:12px 16px;gap:8px}}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}@media(max-width:640px){.fb-config-panel__header-left{gap:8px}}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}@media(max-width:640px){.fb-config-panel__type-switcher{gap:4px}}.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}@media(max-width:640px){.fb-config-panel__type-label{font-size:.7rem}}.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}@media(max-width:640px){.fb-config-panel__type-select{height:32px;font-size:.75rem;min-width:140px;padding:0 28px 0 8px}}.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)}@media(max-width:1024px){.fb-config-panel__title{font-size:1.125rem}}@media(max-width:640px){.fb-config-panel__title{font-size:1rem}}.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)}@media(max-width:640px){.fb-config-panel__badge{padding:3px 8px;font-size:9px}}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;overflow-x:hidden;width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;padding:12px 16px}@media(min-width:600px){.fb-config-panel__form-wrapper{padding:16px 20px}}@media(min-width:768px){.fb-config-panel__form-wrapper{padding:20px 24px}}@media(min-width:1024px){.fb-config-panel__form-wrapper{padding:1rem}}@media(min-width:1440px){.fb-config-panel__form-wrapper{padding:28px 40px}}@media(min-width:1920px){.fb-config-panel__form-wrapper{padding:32px 48px}}.fb-config-panel__form-wrapper .fb-config-card{width:100%;max-width:none;margin:0;background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;min-width:0;flex:1;box-sizing:border-box}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .sf-col{min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{display:grid;grid-auto-flow:dense;gap:12px;width:100%;align-items:start}@media(max-width:599px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:1fr;gap:12px}}@media(min-width:600px)and (max-width:767px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:1fr;gap:14px}}@media(min-width:768px)and (max-width:1023px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(2,1fr);gap:14px}}@media(min-width:1024px)and (max-width:1439px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(2,1fr);gap:16px}}@media(min-width:1440px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(3,1fr);gap:18px}}@media(min-width:1920px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(3,1fr);gap:20px}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>*{display:flex;flex-direction:column;min-width:0;overflow:hidden}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep .form-field-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep .field-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep input,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep select,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep textarea{width:100%;min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;min-width:0}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper{gap:6px}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.75rem;font-weight:600;margin:0;flex-shrink:1;min-width:0;word-break:keep-all}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.7rem}}@media(max-width:640px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.65rem}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .switch{flex-shrink:0}.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}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper{gap:6px}}.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}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.7rem}}@media(max-width:640px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.65rem}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .switch{flex-shrink:0}.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}@media(max-width:768px){.fb-config-panel__error{padding:16px;font-size:13px}}@media(max-width:640px){.fb-config-panel__error{padding:12px;font-size:12px}}\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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { selectedField: [{
+            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;--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: 12px;--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: 12px;--cc-sf-label-size: .75rem;--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: .5rem .75rem;--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}@media(min-width:600px){.fb-config-panel{--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: 14px;--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: 14px;--cc-sf-label-size: .8rem;--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: .5rem .75rem;--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}}@media(min-width:768px){.fb-config-panel{--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: 16px;--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}}@media(min-width:1024px){.fb-config-panel{--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: 16px;--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}}@media(min-width:1440px){.fb-config-panel{--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: 18px;--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: 18px;--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}}@media(min-width:1920px){.fb-config-panel{--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: 18px;--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: 18px;--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__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 24px}@media(max-width:640px){.fb-config-panel__empty{padding:24px 16px}}.fb-config-panel__empty-icon{margin-bottom:24px;opacity:.4;color:var(--fb-fc-accent, #3b82f6)}@media(max-width:640px){.fb-config-panel__empty-icon{margin-bottom:16px}}.fb-config-panel__empty-text{font-size:15px;max-width:320px;line-height:1.6;font-weight:500}@media(max-width:640px){.fb-config-panel__empty-text{font-size:14px;max-width:100%}}.fb-config-panel__header{background:var(--fb-fc-header-bg, #ffffff);padding:1.4rem;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}@media(max-width:768px){.fb-config-panel__header{padding:16px 24px;gap:12px}}@media(max-width:640px){.fb-config-panel__header{padding:12px 16px;gap:8px}}.fb-config-panel__header-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}@media(max-width:640px){.fb-config-panel__header-left{gap:8px}}.fb-config-panel__type-switcher{display:flex;align-items:center;gap:8px;flex-shrink:0}@media(max-width:640px){.fb-config-panel__type-switcher{gap:4px}}.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}@media(max-width:640px){.fb-config-panel__type-label{font-size:.7rem}}.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}@media(max-width:640px){.fb-config-panel__type-select{height:32px;font-size:.75rem;min-width:140px;padding:0 28px 0 8px}}.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)}@media(max-width:1024px){.fb-config-panel__title{font-size:1.125rem}}@media(max-width:640px){.fb-config-panel__title{font-size:1rem}}.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)}@media(max-width:640px){.fb-config-panel__badge{padding:3px 8px;font-size:9px}}.fb-config-panel__form-wrapper{flex:1;overflow-y:auto;overflow-x:hidden;width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;padding:12px 16px}@media(min-width:600px){.fb-config-panel__form-wrapper{padding:16px 20px}}@media(min-width:768px){.fb-config-panel__form-wrapper{padding:20px 24px}}@media(min-width:1024px){.fb-config-panel__form-wrapper{padding:1rem}}@media(min-width:1440px){.fb-config-panel__form-wrapper{padding:28px 40px}}@media(min-width:1920px){.fb-config-panel__form-wrapper{padding:32px 48px}}.fb-config-panel__form-wrapper .fb-config-card{width:100%;max-width:none;margin:0;background:transparent;border:none;box-shadow:none;display:flex;flex-direction:column;min-width:0;flex:1;box-sizing:border-box}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .sf-col{min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{display:grid;grid-auto-flow:dense;gap:12px;width:100%;align-items:start}@media(max-width:599px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:1fr;gap:12px}}@media(min-width:600px)and (max-width:767px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:1fr;gap:14px}}@media(min-width:768px)and (max-width:1023px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(2,1fr);gap:14px}}@media(min-width:1024px)and (max-width:1439px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(2,1fr);gap:16px}}@media(min-width:1440px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(3,1fr);gap:18px}}@media(min-width:1920px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal{grid-template-columns:repeat(3,1fr);gap:20px}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>*{display:flex;flex-direction:column;min-width:0;overflow:hidden}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep .form-field-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep .field-wrapper,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep input,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep select,.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal>* ::ng-deep textarea{width:100%;min-width:0}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;white-space:nowrap;min-width:0}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper{gap:6px}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.75rem;font-weight:600;margin:0;flex-shrink:1;min-width:0;word-break:keep-all}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.7rem}}@media(max-width:640px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .field-label{font-size:.65rem}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .form-row.horizontal .sf-switch-wrapper .switch{flex-shrink:0}.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}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper{gap:6px}}.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}@media(max-width:768px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.7rem}}@media(max-width:640px){.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .field-label{font-size:.65rem}}.fb-config-panel__form-wrapper .fb-config-card ::ng-deep .grid-row .sf-col .sf-switch-wrapper .switch{flex-shrink:0}.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}@media(max-width:768px){.fb-config-panel__error{padding:16px;font-size:13px}}@media(max-width:640px){.fb-config-panel__error{padding:12px;font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SnackbarService }], propDecorators: { selectedField: [{
                 type: Input
             }], selectedFieldInfo: [{
                 type: Input
@@ -6961,11 +7149,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 });
     /**
@@ -7003,16 +7200,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%;width: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;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\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%;width: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;width:100%}@media(max-width:768px){.fb-configurator__layout{flex-direction:column}}.fb-configurator__sidebar{flex:0 0 280px;border-right:1px solid var(--fb-fc-border, #e5e7eb);background:var(--fb-fc-sidebar-bg, #f9fafb);display:flex;flex-direction:column;overflow:hidden;min-width:0}@media(max-width:1024px){.fb-configurator__sidebar{flex:0 0 250px}}@media(min-width:1440px){.fb-configurator__sidebar{flex:0 0 300px}}@media(max-width:768px){.fb-configurator__sidebar{flex:0 0 auto;width:100%;border-right:none;border-bottom:1px solid var(--fb-fc-border, #e5e7eb);max-height:40vh}}@media(max-width:640px){.fb-configurator__sidebar{max-height:35vh}}.fb-configurator__main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;background:var(--fb-fc-main-bg, #ffffff);display:flex;flex-direction:column}@media(max-width:768px){.fb-configurator__main{width:100%;flex:1;min-height:0}}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], schemaChange: [{
                 type: Output
+            }], showOptionConfig: [{
+                type: Input
             }] } });
 
 const COMPONENTS = [