commons-shared-web-ui 0.0.32 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3152,11 +3152,11 @@ class SmartFormComponent {
|
|
|
3152
3152
|
}
|
|
3153
3153
|
}
|
|
3154
3154
|
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 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3155
|
-
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", stepChange: "stepChange" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n\r\n <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\r\n\r\n <!-- Title + description -->\r\n <div class=\"skel-header\">\r\n <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\r\n <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\r\n </div>\r\n\r\n <!-- Section 1 \u2014 two full-width fields -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\r\n </div>\r\n <div class=\"skel-field skel-field--full\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\r\n <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 2 \u2014 three columns -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\r\n <div class=\"skel-fields skel-fields--three\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 3 \u2014 two columns + chip row -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skel-chips\">\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action bar -->\r\n <div class=\"skel-actions\">\r\n <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\r\n <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\r\n Rendered when formSchema.sectionStepper === true.\r\n The nav and each step section are separate cards (no outer wrapper card).\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\r\n\r\n <!-- Horizontal stepper nav card -->\r\n <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\r\n <div class=\"section-stepper-track\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"section-stepper-step\"\r\n [class.ss-active]=\"i === currentSectionStep\"\r\n [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\r\n (click)=\"goToSectionStep(i)\">\r\n\r\n <!-- Connector line \u2014 left side (hidden for first step) -->\r\n <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\r\n\r\n <!-- Step badge -->\r\n <div class=\"ss-badge\">\r\n <!-- Green checkmark: visited and valid -->\r\n <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\r\n <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n class=\"ss-warning-mark\">!</span>\r\n <!-- Number: current or future step -->\r\n <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\r\n </div>\r\n\r\n <!-- Step label (truncated; full text revealed by CSS tooltip) -->\r\n <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\r\n {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\r\n </div>\r\n\r\n <!-- Connector line \u2014 right side (hidden for last step) -->\r\n <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\r\n <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"ss-step-panel\"\r\n [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\r\n <lib-form-section\r\n [config]=\"getSectionStepConfig(step)\"\r\n [controller]=\"controller\"\r\n [formGroup]=\"formGroup\">\r\n </lib-form-section>\r\n </div>\r\n </form>\r\n\r\n <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \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\"\r\n *ngIf=\"!readOnly && formSchema.showActions !== false && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\r\n <div class=\"action-group action-group--left\">\r\n <lib-button\r\n *ngIf=\"!isSectionStepFirst\"\r\n variant=\"outline\"\r\n (click)=\"navigateToPrevious()\">\r\n {{ previousLabel }}\r\n </lib-button>\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\r\n <div class=\"action-group action-group--right\">\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n <lib-button\r\n *ngIf=\"!isSectionStepLast\"\r\n variant=\"primary\"\r\n (click)=\"navigateToNext()\">\r\n {{ nextLabel }}\r\n </lib-button>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Regular card wrapper \u2014 used for SECTION and STEPPER form types.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\r\n [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 type nav -->\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 <!-- Regular 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 type 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 && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP -->\r\n <div class=\"action-group action-group--left\">\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>\r\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{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));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.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));animation:form-reveal .3s ease both}.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}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.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{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.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);margin-top:8px;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"] }] });
|
|
3155
|
+
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", stepChange: "stepChange" }, providers: [SmartFormController], usesOnChanges: true, ngImport: i0, template: "<div class=\"smart-form-container\">\r\n\r\n <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\r\n\r\n <!-- Title + description -->\r\n <div class=\"skel-header\">\r\n <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\r\n <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\r\n </div>\r\n\r\n <!-- Section 1 \u2014 two full-width fields -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\r\n </div>\r\n <div class=\"skel-field skel-field--full\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\r\n <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 2 \u2014 three columns -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\r\n <div class=\"skel-fields skel-fields--three\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 3 \u2014 two columns + chip row -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skel-chips\">\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action bar -->\r\n <div class=\"skel-actions\">\r\n <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\r\n <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\r\n Rendered when formSchema.sectionStepper === true.\r\n The nav and each step section are separate cards (no outer wrapper card).\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\r\n\r\n <!-- Horizontal stepper nav card -->\r\n <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\r\n <div class=\"section-stepper-track\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"section-stepper-step\"\r\n [class.ss-active]=\"i === currentSectionStep\"\r\n [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\r\n (click)=\"goToSectionStep(i)\">\r\n\r\n <!-- Connector line \u2014 left side (hidden for first step) -->\r\n <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\r\n\r\n <!-- Step badge -->\r\n <div class=\"ss-badge\">\r\n <!-- Green checkmark: visited and valid -->\r\n <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\r\n <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n class=\"ss-warning-mark\">!</span>\r\n <!-- Number: current or future step -->\r\n <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\r\n </div>\r\n\r\n <!-- Step label (truncated; full text revealed by CSS tooltip) -->\r\n <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\r\n {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\r\n </div>\r\n\r\n <!-- Connector line \u2014 right side (hidden for last step) -->\r\n <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\r\n <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"ss-step-panel\"\r\n [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\r\n <lib-form-section\r\n [config]=\"getSectionStepConfig(step)\"\r\n [controller]=\"controller\"\r\n [formGroup]=\"formGroup\">\r\n </lib-form-section>\r\n </div>\r\n </form>\r\n\r\n <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \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\"\r\n *ngIf=\"!readOnly && formSchema.showActions !== false && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\r\n <div class=\"action-group action-group--left\">\r\n <lib-button\r\n *ngIf=\"!isSectionStepFirst\"\r\n variant=\"outline\"\r\n (click)=\"navigateToPrevious()\">\r\n {{ previousLabel }}\r\n </lib-button>\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\r\n <div class=\"action-group action-group--right\">\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n <lib-button\r\n *ngIf=\"!isSectionStepLast\"\r\n variant=\"primary\"\r\n (click)=\"navigateToNext()\">\r\n {{ nextLabel }}\r\n </lib-button>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Regular card wrapper \u2014 used for SECTION and STEPPER form types.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\r\n [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 type nav -->\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 <!-- Regular 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 type 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 && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP -->\r\n <div class=\"action-group action-group--left\">\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>\r\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{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));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.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);animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback,.form-header{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}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.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{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.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);margin-top:8px;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"] }] });
|
|
3156
3156
|
}
|
|
3157
3157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SmartFormComponent, decorators: [{
|
|
3158
3158
|
type: Component,
|
|
3159
|
-
args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n\r\n <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\r\n\r\n <!-- Title + description -->\r\n <div class=\"skel-header\">\r\n <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\r\n <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\r\n </div>\r\n\r\n <!-- Section 1 \u2014 two full-width fields -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\r\n </div>\r\n <div class=\"skel-field skel-field--full\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\r\n <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 2 \u2014 three columns -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\r\n <div class=\"skel-fields skel-fields--three\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 3 \u2014 two columns + chip row -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skel-chips\">\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action bar -->\r\n <div class=\"skel-actions\">\r\n <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\r\n <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\r\n Rendered when formSchema.sectionStepper === true.\r\n The nav and each step section are separate cards (no outer wrapper card).\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\r\n\r\n <!-- Horizontal stepper nav card -->\r\n <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\r\n <div class=\"section-stepper-track\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"section-stepper-step\"\r\n [class.ss-active]=\"i === currentSectionStep\"\r\n [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\r\n (click)=\"goToSectionStep(i)\">\r\n\r\n <!-- Connector line \u2014 left side (hidden for first step) -->\r\n <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\r\n\r\n <!-- Step badge -->\r\n <div class=\"ss-badge\">\r\n <!-- Green checkmark: visited and valid -->\r\n <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\r\n <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n class=\"ss-warning-mark\">!</span>\r\n <!-- Number: current or future step -->\r\n <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\r\n </div>\r\n\r\n <!-- Step label (truncated; full text revealed by CSS tooltip) -->\r\n <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\r\n {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\r\n </div>\r\n\r\n <!-- Connector line \u2014 right side (hidden for last step) -->\r\n <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\r\n <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"ss-step-panel\"\r\n [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\r\n <lib-form-section\r\n [config]=\"getSectionStepConfig(step)\"\r\n [controller]=\"controller\"\r\n [formGroup]=\"formGroup\">\r\n </lib-form-section>\r\n </div>\r\n </form>\r\n\r\n <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \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\"\r\n *ngIf=\"!readOnly && formSchema.showActions !== false && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\r\n <div class=\"action-group action-group--left\">\r\n <lib-button\r\n *ngIf=\"!isSectionStepFirst\"\r\n variant=\"outline\"\r\n (click)=\"navigateToPrevious()\">\r\n {{ previousLabel }}\r\n </lib-button>\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\r\n <div class=\"action-group action-group--right\">\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n <lib-button\r\n *ngIf=\"!isSectionStepLast\"\r\n variant=\"primary\"\r\n (click)=\"navigateToNext()\">\r\n {{ nextLabel }}\r\n </lib-button>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Regular card wrapper \u2014 used for SECTION and STEPPER form types.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\r\n [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 type nav -->\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 <!-- Regular 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 type 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 && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP -->\r\n <div class=\"action-group action-group--left\">\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>\r\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{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));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.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));animation:form-reveal .3s ease both}.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}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.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{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.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);margin-top:8px;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"] }]
|
|
3159
|
+
args: [{ selector: 'lib-smart-form', providers: [SmartFormController], standalone: false, template: "<div class=\"smart-form-container\">\r\n\r\n <!-- \u2550\u2550 Skeleton loader \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-skeleton\" *ngIf=\"!isFormReady\" aria-hidden=\"true\">\r\n\r\n <!-- Title + description -->\r\n <div class=\"skel-header\">\r\n <div class=\"skel-block skel-title\" style=\"--sd: 0s\"></div>\r\n <div class=\"skel-block skel-desc\" style=\"--sd: 0.07s\"></div>\r\n </div>\r\n\r\n <!-- Section 1 \u2014 two full-width fields -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.1s; width: 32%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.13s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.15s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.16s; width: 45%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.18s\"></div>\r\n </div>\r\n <div class=\"skel-field skel-field--full\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.2s; width: 38%\"></div>\r\n <div class=\"skel-block skel-input skel-input--textarea\" style=\"--sd: 0.22s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 2 \u2014 three columns -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.25s; width: 24%\"></div>\r\n <div class=\"skel-fields skel-fields--three\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.28s; width: 60%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.30s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.31s; width: 50%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.33s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.34s; width: 65%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.36s\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Section 3 \u2014 two columns + chip row -->\r\n <div class=\"skel-section\">\r\n <div class=\"skel-block skel-section-label\" style=\"--sd: 0.38s; width: 28%\"></div>\r\n <div class=\"skel-fields skel-fields--two\">\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.40s; width: 48%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.42s\"></div>\r\n </div>\r\n <div class=\"skel-field\">\r\n <div class=\"skel-block skel-label\" style=\"--sd: 0.43s; width: 55%\"></div>\r\n <div class=\"skel-block skel-input\" style=\"--sd: 0.45s\"></div>\r\n </div>\r\n </div>\r\n <div class=\"skel-chips\">\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.47s; width: 72px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.49s; width: 96px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.51s; width: 80px\"></div>\r\n <div class=\"skel-block skel-chip\" style=\"--sd: 0.53s; width: 64px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action bar -->\r\n <div class=\"skel-actions\">\r\n <div class=\"skel-block skel-btn\" style=\"--sd: 0.55s; width: 88px\"></div>\r\n <div class=\"skel-block skel-btn skel-btn--primary\" style=\"--sd: 0.58s; width: 120px\"></div>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION STEPPER layout \u2014 stepper nav card + per-step form panels.\r\n Rendered when formSchema.sectionStepper === true.\r\n The nav and each step section are separate cards (no outer wrapper card).\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <ng-container *ngIf=\"formSchema && isFormReady && isSectionStepper\">\r\n\r\n <!-- Horizontal stepper nav card -->\r\n <div class=\"section-stepper-nav\" *ngIf=\"sectionSteps.length > 0\">\r\n <div class=\"section-stepper-track\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"section-stepper-step\"\r\n [class.ss-active]=\"i === currentSectionStep\"\r\n [class.ss-completed]=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n [class.ss-warning]=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n [attr.data-tooltip]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\"\r\n (click)=\"goToSectionStep(i)\">\r\n\r\n <!-- Connector line \u2014 left side (hidden for first step) -->\r\n <div class=\"ss-connector ss-connector--left\" *ngIf=\"i > 0\"></div>\r\n\r\n <!-- Step badge -->\r\n <div class=\"ss-badge\">\r\n <!-- Green checkmark: visited and valid -->\r\n <svg *ngIf=\"i < currentSectionStep && stepValidationStates[i] !== 'warning'\"\r\n width=\"13\" height=\"13\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n </svg>\r\n <!-- Warning: bold ! is the most visible option inside a 38px circle badge -->\r\n <span *ngIf=\"i < currentSectionStep && stepValidationStates[i] === 'warning'\"\r\n class=\"ss-warning-mark\">!</span>\r\n <!-- Number: current or future step -->\r\n <span *ngIf=\"i >= currentSectionStep\">{{ i + 1 }}</span>\r\n </div>\r\n\r\n <!-- Step label (truncated; full text revealed by CSS tooltip) -->\r\n <div class=\"ss-label\" [title]=\"step.sectionConfig?.label || 'Step ' + (i + 1)\">\r\n {{ step.sectionConfig?.label || 'Step ' + (i + 1) }}\r\n </div>\r\n\r\n <!-- Connector line \u2014 right side (hidden for last step) -->\r\n <div class=\"ss-connector ss-connector--right\" *ngIf=\"i < sectionSteps.length - 1\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Step panels \u2014 all mounted, only active one is visible (preserves form data) -->\r\n <form [formGroup]=\"formGroup\" class=\"smart-form ss-form\">\r\n <div\r\n *ngFor=\"let step of sectionSteps; let i = index\"\r\n class=\"ss-step-panel\"\r\n [style.display]=\"i === currentSectionStep ? 'block' : 'none'\">\r\n <lib-form-section\r\n [config]=\"getSectionStepConfig(step)\"\r\n [controller]=\"controller\"\r\n [formGroup]=\"formGroup\">\r\n </lib-form-section>\r\n </div>\r\n </form>\r\n\r\n <!-- \u2500\u2500 Action bar: Prev / custom action buttons / Next \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\"\r\n *ngIf=\"!readOnly && formSchema.showActions !== false && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP: Previous button + left-aligned custom buttons -->\r\n <div class=\"action-group action-group--left\">\r\n <lib-button\r\n *ngIf=\"!isSectionStepFirst\"\r\n variant=\"outline\"\r\n (click)=\"navigateToPrevious()\">\r\n {{ previousLabel }}\r\n </lib-button>\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('left')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n </div>\r\n\r\n <!-- RIGHT GROUP: right-aligned custom buttons + Next button -->\r\n <div class=\"action-group action-group--right\">\r\n <ng-container *ngFor=\"let btn of getButtonsForAlignment('right')\">\r\n <lib-button\r\n *ngIf=\"!btn.showOnLastStepOnly || isSectionStepLast\"\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 </ng-container>\r\n <lib-button\r\n *ngIf=\"!isSectionStepLast\"\r\n variant=\"primary\"\r\n (click)=\"navigateToNext()\">\r\n {{ nextLabel }}\r\n </lib-button>\r\n </div>\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n Regular card wrapper \u2014 used for SECTION and STEPPER form types.\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <div class=\"smart-form-wrapper\" *ngIf=\"formSchema && isFormReady && !isSectionStepper\"\r\n [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 type nav -->\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 <!-- Regular 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 type 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 && actionBarConfig?.buttons?.length\">\r\n\r\n <!-- LEFT GROUP -->\r\n <div class=\"action-group action-group--left\">\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>\r\n", styles: ["@keyframes skel-wave{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes skel-fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes form-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.smart-form-skeleton{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));padding:1.5rem;display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px);animation:skel-fade-in .3s ease both}.skel-block{position:relative;overflow:hidden;border-radius:6px;background:var(--cc-sf-input-disabled-bg, #F0F2F5)}.skel-block:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.55) 55%,transparent 100%);animation:skel-wave 1.8s ease-in-out infinite;animation-delay:var(--sd, 0s)}.skel-header{display:flex;flex-direction:column;gap:10px}.skel-header .skel-title{height:26px;border-radius:8px}.skel-header .skel-desc{height:14px;border-radius:5px;opacity:.7}.skel-section{display:flex;flex-direction:column;gap:14px}.skel-section-label{height:16px;border-radius:0 5px 5px 0;border-left:var(--cc-sf-section-header-accent-width, 4px) solid var(--cc-sf-section-header-accent-color, #3B82F6);background:var(--cc-sf-input-disabled-bg, #F0F2F5);opacity:.85}.skel-fields{display:grid;gap:var(--cc-sf-grid-gap, 16px);align-items:start}.skel-fields--two{grid-template-columns:1fr 1fr}.skel-fields--three{grid-template-columns:1fr 1fr 1fr}@media(max-width:640px){.skel-fields--two,.skel-fields--three{grid-template-columns:1fr}}.skel-field{display:flex;flex-direction:column;gap:7px}.skel-field--full{grid-column:1/-1}.skel-label{height:12px;border-radius:4px;opacity:.75}.skel-input{height:42px;border-radius:8px}.skel-input--textarea{height:80px}.skel-chips{display:flex;flex-wrap:wrap;gap:8px}.skel-chip{height:32px;border-radius:20px;opacity:.8}.skel-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding-top:20px;border-top:var(--cc-sf-actions-border, 1px solid #E5E7EB)}.skel-btn{height:40px;border-radius:8px}.skel-btn--primary{background:color-mix(in srgb,var(--cc-sf-accent-color, #3B82F6) 18%,var(--cc-sf-input-disabled-bg, #F0F2F5))}.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);animation:form-reveal .3s ease both}.smart-form-wrapper .form-alert-feedback,.form-header{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}@keyframes ss-badge-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}@keyframes ss-pulse-ring{0%{box-shadow:0 0 #6366f173}70%{box-shadow:0 0 0 10px #6366f100}to{box-shadow:0 0 #6366f100}}@keyframes ss-panel-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes ss-connector-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.section-stepper-nav{position:relative;background:#fff;border-radius:16px;border:1px solid #E8EAF0;box-shadow:0 1px 3px #0000000d,0 4px 16px #6366f10f;padding:24px 28px 48px;margin-bottom:14px;overflow-x:clip;overflow-y:hidden}.section-stepper-nav:before{content:\"\";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;background:linear-gradient(90deg,#6366f1,#8b5cf6,#ec4899)}.section-stepper-track{display:flex;align-items:flex-start;justify-content:space-between;min-width:max-content;width:100%}.section-stepper-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;cursor:pointer;padding:0 4px}.section-stepper-step:after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);white-space:nowrap;background:#1e1b4b;color:#fff;font-size:.6875rem;font-weight:500;letter-spacing:.02em;padding:5px 11px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:200;box-shadow:0 4px 14px #0003}.section-stepper-step:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.section-stepper-step .ss-badge{width:38px;height:38px;min-width:38px;border-radius:50%;background:#f1f2f6;color:#9ca3af;border:2px solid #E5E7EB;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:700;position:relative;z-index:1;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.section-stepper-step .ss-badge span{line-height:1;letter-spacing:-.01em}.section-stepper-step .ss-badge svg{flex-shrink:0}.section-stepper-step .ss-badge .ss-warning-mark{font-size:1.25rem;font-weight:900;line-height:1;letter-spacing:0;color:#fff}.section-stepper-step .ss-label{margin-top:9px;font-size:.6875rem;font-weight:500;color:#b0b7c3;white-space:nowrap;text-align:center;transition:color .25s ease,font-weight .25s ease;max-width:88px;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.section-stepper-step .ss-connector{height:2px;background:#e8eaf0;position:absolute;top:19px;z-index:0;overflow:hidden;border-radius:2px}.section-stepper-step .ss-connector--left{left:0;right:calc(50% + 19px)}.section-stepper-step .ss-connector--right{left:calc(50% + 19px);right:0}.section-stepper-step .ss-connector:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#6366f1,#8b5cf6);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.section-stepper-step.ss-active{cursor:default}.section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-color:transparent;box-shadow:0 0 0 4px #6366f12e,0 4px 12px #6366f159;animation:ss-badge-pop .4s cubic-bezier(.34,1.56,.64,1) both,ss-pulse-ring 2s .4s ease-out infinite}.section-stepper-step.ss-active .ss-label{color:#4f46e5;font-weight:700}.section-stepper-step.ss-completed .ss-badge{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px #10b9814d}.section-stepper-step.ss-completed .ss-label{color:#6b7280;font-weight:500}.section-stepper-step.ss-completed .ss-connector--left:after,.section-stepper-step.ss-completed .ss-connector--right:after{transform:scaleX(1)}.section-stepper-step.ss-warning .ss-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 2px 8px #f59e0b59;animation:ss-badge-pop .35s cubic-bezier(.34,1.56,.64,1) both}.section-stepper-step.ss-warning .ss-label{color:#b45309;font-weight:600}.section-stepper-step.ss-warning .ss-connector--left:after{transform:scaleX(0)}.section-stepper-step.ss-warning .ss-connector--right:after{transform:scaleX(0)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{background:#e8eaf0;color:#6366f1;border-color:#c7d2fe;transform:translateY(-2px)}.section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-label{color:#6b7280}.ss-step-panel{animation:ss-panel-in .35s cubic-bezier(.4,0,.2,1) both}.ss-form{padding-top:0}@media(max-width:768px){.section-stepper-nav{padding:20px 16px 16px}.section-stepper-step .ss-label{font-size:.625rem;max-width:64px}.section-stepper-step .ss-badge{width:32px;height:32px;min-width:32px;font-size:.75rem}.section-stepper-step .ss-connector{top:16px}.section-stepper-step .ss-connector--left{right:calc(50% + 16px)}.section-stepper-step .ss-connector--right{left:calc(50% + 16px)}}.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{display:flex;flex-direction:column;gap:var(--cc-sf-form-section-gap, 24px)}.smart-form>*{margin-bottom:0!important}.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);margin-top:8px;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"] }]
|
|
3160
3160
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: SmartFormController }, { type: ExpressionService }, { type: i3.HttpClient }, { type: SnackbarService }, { type: i1$4.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { formJson: [{
|
|
3161
3161
|
type: Input
|
|
3162
3162
|
}], initialValues: [{
|
|
@@ -7419,11 +7419,11 @@ class ConfiguratorConfigPanelComponent {
|
|
|
7419
7419
|
return patch;
|
|
7420
7420
|
}
|
|
7421
7421
|
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 });
|
|
7422
|
-
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-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}@media(min-width:600px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:768px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1024px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1440px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1920px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}.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", "stepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7422
|
+
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-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}@media(min-width:600px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:768px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1024px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1440px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1920px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}.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", "stepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7423
7423
|
}
|
|
7424
7424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfiguratorConfigPanelComponent, decorators: [{
|
|
7425
7425
|
type: Component,
|
|
7426
|
-
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-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}@media(min-width:600px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:768px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1024px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1440px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1920px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}.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"] }]
|
|
7426
|
+
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-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}@media(min-width:600px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:768px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1024px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1440px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}@media(min-width:1920px){.fb-config-panel{--cc-sf-font-family: Inter, Segoe UI, sans-serif;--cc-sf-font-size-base: .875rem;--cc-sf-accent-color: #3B82F6;--cc-sf-selected-color: #3B82F6;--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-section-gap: 24px;--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-section-header-accent-width: 4px;--cc-sf-section-header-accent-color: #3B82F6;--cc-sf-section-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-bg: #F9FAFB;--cc-sf-repeater-accordion-header-color: #1F2937;--cc-sf-repeater-accordion-active-bg: #EFF6FF;--cc-sf-repeater-badge-bg: #E5E7EB;--cc-sf-repeater-badge-color: #374151;--cc-sf-section-border-radius-inner: 8px;--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-field-gap: 6px;--cc-sf-focus-ring-width: 3px;--cc-sf-focus-ring-offset: 0;--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: #F8FAFC;--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-icon-bg: rgba(59, 130, 246, .1);--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-btn-remove-padding: .375rem .75rem;--cc-sf-btn-remove-font-size: .875rem;--cc-sf-btn-remove-font-weight: 500;--cc-sf-btn-add-padding: .625rem 1.5rem;--cc-sf-btn-add-font-size: .875rem;--cc-sf-btn-add-font-weight: 600;--cc-sf-stepper-connector-display: block;--cc-sf-instance-shadow: none;--cc-sf-instance-hover-shadow: none;--cc-sf-instance-transition: none;--cc-sf-instance-header-divider: none;--cc-sf-instance-header-pb: 0px;--cc-sf-instance-header-mb: 0px;--cc-sf-instance-num-weight: 600;--cc-sf-section-stepper-accent: #6366F1;--cc-sf-section-stepper-accent-end: #8B5CF6;--cc-sf-section-stepper-active-label: #4F46E5;--cc-sf-section-stepper-active-glow: rgba(99, 102, 241, .25);--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 ::ng-deep .stepper-nav .stepper-step:not(:last-child):after{display:var(--cc-sf-stepper-connector-display)!important}.fb-config-panel ::ng-deep .section-instance{background:var(--cc-sf-instance-bg)!important;border:var(--cc-sf-instance-border)!important;border-radius:var(--cc-sf-instance-radius)!important;box-shadow:var(--cc-sf-instance-shadow);transition:var(--cc-sf-instance-transition)}.fb-config-panel ::ng-deep .section-instance:hover{box-shadow:var(--cc-sf-instance-hover-shadow)}.fb-config-panel ::ng-deep .section-instance-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--cc-sf-instance-header-pb);margin-bottom:var(--cc-sf-instance-header-mb);border-bottom:var(--cc-sf-instance-header-divider)}.fb-config-panel ::ng-deep .section-instance-num{font-size:var(--cc-sf-instance-num-size);font-weight:var(--cc-sf-instance-num-weight);color:var(--cc-sf-instance-num-color)}.fb-config-panel ::ng-deep .btn-instance-remove{display:inline-flex;align-items:center;gap:6px;padding:var(--cc-sf-btn-remove-padding);border-radius:var(--cc-sf-btn-remove-radius);border:var(--cc-sf-btn-remove-border)!important;background:var(--cc-sf-btn-remove-bg);color:var(--cc-sf-btn-remove-color)!important;font-size:var(--cc-sf-btn-remove-font-size);font-weight:var(--cc-sf-btn-remove-font-weight);cursor:pointer;transition:all .15s ease}.fb-config-panel ::ng-deep .btn-instance-remove:hover{background:var(--cc-sf-btn-remove-hover-bg)}.fb-config-panel ::ng-deep .btn-add-section{display:inline-flex;align-items:center;gap:8px;padding:var(--cc-sf-btn-add-padding);border-radius:var(--cc-sf-btn-add-radius);border:var(--cc-sf-btn-add-border)!important;background:var(--cc-sf-btn-add-bg);color:var(--cc-sf-btn-add-color);font-size:var(--cc-sf-btn-add-font-size);font-weight:var(--cc-sf-btn-add-font-weight);cursor:pointer;transition:all .18s ease}.fb-config-panel ::ng-deep .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg);border-color:var(--cc-sf-btn-add-hover-border)!important}.fb-config-panel ::ng-deep .section-stepper-nav:before{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-badge{background:linear-gradient(135deg,var(--cc-sf-section-stepper-accent) 0%,var(--cc-sf-section-stepper-accent-end) 100%)!important;box-shadow:0 0 0 4px var(--cc-sf-section-stepper-active-glow),0 4px 12px var(--cc-sf-section-stepper-active-glow)!important}.fb-config-panel ::ng-deep .section-stepper-step.ss-active .ss-label{color:var(--cc-sf-section-stepper-active-label)!important}.fb-config-panel ::ng-deep .section-stepper-step:not(.ss-active):not(.ss-completed):not(.ss-warning):hover .ss-badge{color:var(--cc-sf-section-stepper-accent)!important;border-color:var(--cc-sf-section-stepper-accent-end)!important}.fb-config-panel ::ng-deep .section-stepper-step .ss-connector:after{background:linear-gradient(90deg,var(--cc-sf-section-stepper-accent),var(--cc-sf-section-stepper-accent-end))!important}}.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"] }]
|
|
7427
7427
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SnackbarService }], propDecorators: { selectedField: [{
|
|
7428
7428
|
type: Input
|
|
7429
7429
|
}], selectedFieldInfo: [{
|
|
@@ -7755,11 +7755,11 @@ class ConfirmationModalComponent {
|
|
|
7755
7755
|
return typeof icon === 'object' ? icon.color : undefined;
|
|
7756
7756
|
}
|
|
7757
7757
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7758
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationModalComponent, isStandalone: false, selector: "cc-confirmation-modal", inputs: { config: "config", isOpen: "isOpen", confirmDisabled: "confirmDisabled", confirmLoading: "confirmLoading" }, outputs: { confirm: "confirm", cancel: "cancel", close: "close", showCodeSnippet: "showCodeSnippet" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- Header -->\r\n <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n <div class=\"modal-header__content\">\r\n <!-- Icon (Optional) -->\r\n <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n {{ getIconValue(mergedConfig.icon) }}\r\n </mat-icon>\r\n <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n </ng-container>\r\n </span>\r\n\r\n <!-- Title -->\r\n <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n [style.color]=\"mergedConfig.headerTextColor\">\r\n {{ mergedConfig.title }}\r\n </h2>\r\n </div>\r\n\r\n <!-- Code Snippet Button -->\r\n <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n <mat-icon>code</mat-icon>\r\n </button>\r\n\r\n <!-- Close Button -->\r\n <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Body (Content Projection) -->\r\n <div class=\"cc-modal-body cc-modal-body--form-mode\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n (click)=\"onCancel()\">\r\n {{ mergedConfig.cancelButton?.label }}\r\n </button>\r\n\r\n <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n (click)=\"onConfirm()\">\r\n <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n {{ mergedConfig.confirmButton.label }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
7758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ConfirmationModalComponent, isStandalone: false, selector: "cc-confirmation-modal", inputs: { config: "config", isOpen: "isOpen", confirmDisabled: "confirmDisabled", confirmLoading: "confirmLoading" }, outputs: { confirm: "confirm", cancel: "cancel", close: "close", showCodeSnippet: "showCodeSnippet" }, host: { listeners: { "document:keydown.escape": "handleEscape($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- Header -->\r\n <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n <div class=\"modal-header__content\">\r\n <!-- Icon (Optional) -->\r\n <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n {{ getIconValue(mergedConfig.icon) }}\r\n </mat-icon>\r\n <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n </ng-container>\r\n </span>\r\n\r\n <!-- Title -->\r\n <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n [style.color]=\"mergedConfig.headerTextColor\">\r\n {{ mergedConfig.title }}\r\n </h2>\r\n </div>\r\n\r\n <!-- Code Snippet Button -->\r\n <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n <mat-icon>code</mat-icon>\r\n </button>\r\n\r\n <!-- Close Button -->\r\n <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Body (Content Projection) -->\r\n <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n (click)=\"onCancel()\">\r\n {{ mergedConfig.cancelButton?.label }}\r\n </button>\r\n\r\n <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n (click)=\"onConfirm()\">\r\n <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n {{ mergedConfig.confirmButton.label }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
7759
7759
|
}
|
|
7760
7760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
|
|
7761
7761
|
type: Component,
|
|
7762
|
-
args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- Header -->\r\n <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n <div class=\"modal-header__content\">\r\n <!-- Icon (Optional) -->\r\n <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n {{ getIconValue(mergedConfig.icon) }}\r\n </mat-icon>\r\n <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n </ng-container>\r\n </span>\r\n\r\n <!-- Title -->\r\n <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n [style.color]=\"mergedConfig.headerTextColor\">\r\n {{ mergedConfig.title }}\r\n </h2>\r\n </div>\r\n\r\n <!-- Code Snippet Button -->\r\n <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n <mat-icon>code</mat-icon>\r\n </button>\r\n\r\n <!-- Close Button -->\r\n <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Body (Content Projection) -->\r\n <div class=\"cc-modal-body cc-modal-body--form-mode\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n (click)=\"onCancel()\">\r\n {{ mergedConfig.cancelButton?.label }}\r\n </button>\r\n\r\n <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n (click)=\"onConfirm()\">\r\n <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n {{ mergedConfig.confirmButton.label }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
7762
|
+
args: [{ selector: 'cc-confirmation-modal', standalone: false, template: "<div *ngIf=\"isOpen\" class=\"cc-modal-backdrop\" \r\n [ngClass]=\"{'cc-modal-backdrop--side-panel': mergedConfig.type === 'side-panel'}\"\r\n (click)=\"onBackdropClick($event)\" role=\"dialog\" [attr.aria-modal]=\"true\"\r\n [attr.aria-labelledby]=\"'modal-title-' + mergedConfig.title\" [attr.aria-label]=\"mergedConfig.ariaLabel\"\r\n [attr.aria-describedby]=\"mergedConfig.ariaDescribedBy\">\r\n\r\n <div class=\"cc-modal-container {{ mergedConfig.customClass }}\" \r\n [ngClass]=\"{'side-panel': mergedConfig.type === 'side-panel'}\"\r\n [ngStyle]=\"getModalStyles()\" (click)=\"$event.stopPropagation()\">\r\n\r\n <!-- Header -->\r\n <div [ngClass]=\"getHeaderClass()\" [style.background-color]=\"mergedConfig.headerBackgroundColor\"\r\n [style.border-bottom]=\"mergedConfig.headerBorderBottom\">\r\n <div class=\"modal-header__content\">\r\n <!-- Icon (Optional) -->\r\n <span *ngIf=\"mergedConfig.icon\" class=\"modal-header__icon\">\r\n <ng-container [ngSwitch]=\"resolveIconType(mergedConfig.icon)\">\r\n <mat-icon *ngSwitchCase=\"'material'\" [style.color]=\"getIconColor(mergedConfig.icon)\">\r\n {{ getIconValue(mergedConfig.icon) }}\r\n </mat-icon>\r\n <img *ngSwitchCase=\"'custom'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n <img *ngSwitchCase=\"'img'\" [src]=\"getIconValue(mergedConfig.icon)\"\r\n [attr.alt]=\"mergedConfig.labels?.iconAltText || mergedConfig.title + ' icon'\"\r\n class=\"modal-header__custom-icon\">\r\n </ng-container>\r\n </span>\r\n\r\n <!-- Title -->\r\n <h2 class=\"modal-header__title\" [id]=\"'modal-title-' + mergedConfig.title\"\r\n [style.color]=\"mergedConfig.headerTextColor\">\r\n {{ mergedConfig.title }}\r\n </h2>\r\n </div>\r\n\r\n <!-- Code Snippet Button -->\r\n <button *ngIf=\"mergedConfig.showCodeSnippetButton\" type=\"button\" class=\"modal-header__code-btn\"\r\n (click)=\"onShowCodeSnippet()\" [attr.aria-label]=\"mergedConfig.labels?.codeSnippetAriaLabel\"\r\n [attr.title]=\"mergedConfig.labels?.codeSnippetTitle\">\r\n <mat-icon>code</mat-icon>\r\n </button>\r\n\r\n <!-- Close Button -->\r\n <button *ngIf=\"mergedConfig.showCloseButton\" type=\"button\" class=\"modal-header__close\" (click)=\"onClose()\"\r\n [attr.aria-label]=\"mergedConfig.labels?.closeAriaLabel\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <!-- Body (Content Projection) -->\r\n <div class=\"cc-modal-body\" [ngClass]=\"{'cc-modal-body--form-mode': mergedConfig.formMode}\" [style.padding]=\"mergedConfig.padding\" [style.color]=\"mergedConfig.bodyTextColor\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"cc-modal-footer\" [style.background-color]=\"mergedConfig.footerBackgroundColor\"\r\n [style.border-top]=\"mergedConfig.footerBorderTop\">\r\n\r\n <ng-container *ngIf=\"!mergedConfig.customFooter\">\r\n <button *ngIf=\"mergedConfig.cancelButton?.show\" type=\"button\" class=\"cc-btn cc-btn-secondary\"\r\n (click)=\"onCancel()\">\r\n {{ mergedConfig.cancelButton?.label }}\r\n </button>\r\n\r\n <button type=\"button\" [ngClass]=\"getConfirmButtonClass()\"\r\n [disabled]=\"confirmDisabled || mergedConfig.confirmButton.disabled || confirmLoading || mergedConfig.confirmButton.loading\"\r\n (click)=\"onConfirm()\">\r\n <span *ngIf=\"confirmLoading || mergedConfig.confirmButton.loading\" class=\"cc-btn-spinner\"></span>\r\n {{ mergedConfig.confirmButton.label }}\r\n </button>\r\n </ng-container>\r\n\r\n <ng-content select=\"[cc-modal-footer]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: [".cc-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.cc-modal-backdrop--side-panel{align-items:stretch;justify-content:flex-end}.cc-modal-container{background:var(--cc-modal-bg);border-radius:var(--cc-modal-radius);box-shadow:var(--cc-modal-shadow);border:var(--cc-modal-border, none);display:flex;flex-direction:column;max-height:90vh;max-width:90vw;animation:slideIn .3s ease-out;overflow:hidden}.cc-modal-container.side-panel{max-height:100vh;animation:slideInRight .3s ease-out;z-index:1001}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--cc-modal-header-padding);border-bottom:var(--cc-modal-header-border-bottom)}.modal-header__content{display:flex;align-items:center;gap:.75rem;flex:1}.modal-header__icon{display:flex;align-items:center;justify-content:center}.modal-header__icon mat-icon{font-size:var(--cc-modal-icon-size, 1.5rem);width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem)}.modal-header__custom-icon{width:var(--cc-modal-icon-size, 1.5rem);height:var(--cc-modal-icon-size, 1.5rem);object-fit:contain}.modal-header__title{margin:0;font-size:var(--cc-modal-title-size);font-weight:var(--cc-modal-title-weight);line-height:1.4;color:var(--cc-modal-title-color)}.modal-header__close{background:none;border:none;padding:.25rem;cursor:pointer;color:#6b7280;transition:color .2s;display:flex;align-items:center}.modal-header__close:hover{color:#111827}.modal-header__close mat-icon{font-size:var(--cc-modal-close-icon-size, 1.25rem);width:var(--cc-modal-close-icon-size, 1.25rem);height:var(--cc-modal-close-icon-size, 1.25rem)}.modal-header__code-btn{background:none;border:none;padding:.25rem;margin-right:.5rem;cursor:pointer;color:#6b7280;transition:all .2s;display:flex;align-items:center}.modal-header__code-btn:hover{color:#ef4444;transform:scale(1.1)}.modal-header__code-btn mat-icon{font-size:1.15rem;width:1.15rem;height:1.15rem}.modal-header--dark{background-color:var(--cc-modal-header-bg-dark, #262125);border-bottom:none}.modal-header--dark .modal-header__title{color:var(--cc-modal-header-title-color-dark, #FFFFFF)}.modal-header--dark .modal-header__close{color:var(--cc-modal-header-close-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__close:hover{color:#fff}.modal-header--dark .modal-header__code-btn{color:var(--cc-modal-header-code-btn-color-dark, rgba(255, 255, 255, .7))}.modal-header--dark .modal-header__code-btn:hover{color:#fff}.cc-modal-body{padding:var(--cc-modal-body-padding);overflow-y:auto;flex:1;color:var(--cc-modal-body-color);font-size:.875rem;line-height:1.6}.cc-modal-body ::ng-deep input[type=text],.cc-modal-body ::ng-deep textarea,.cc-modal-body ::ng-deep select{width:100%;padding:var(--cc-modal-input-padding, .625rem .75rem);border:.0625rem solid #D1D5DB;border-radius:var(--cc-modal-input-radius, .375rem);font-size:var(--cc-modal-input-font-size, .875rem);transition:border-color .2s}.cc-modal-body ::ng-deep input[type=text]:focus,.cc-modal-body ::ng-deep textarea:focus,.cc-modal-body ::ng-deep select:focus{outline:none;border-color:var(--cc-btn-primary-bg, #3b82f6);box-shadow:0 0 0 .1875rem #3b82f61a}.cc-modal-body ::ng-deep textarea{resize:vertical;min-height:var(--cc-modal-textarea-min-height, 6.25rem)}.cc-modal-body ::ng-deep label{display:block;margin-bottom:var(--cc-modal-label-margin-bottom, .5rem);font-weight:500;color:var(--cc-modal-body-color)}.cc-modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;padding:var(--cc-modal-footer-padding);border-top:var(--cc-modal-footer-border-top);background:var(--cc-modal-footer-bg)}.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:var(--cc-btn-padding, .5rem 1rem);font-family:var(--cc-btn-font-family, inherit);font-weight:var(--cc-btn-font-weight, 500);font-size:var(--cc-btn-font-size, .875rem);cursor:pointer;transition:all .2s;min-width:5rem}.cc-btn:disabled{opacity:var(--cc-btn-disabled-opacity, .6);cursor:var(--cc-btn-disabled-cursor, not-allowed)}.cc-btn-secondary{background:var(--cc-btn-secondary-bg);color:var(--cc-btn-secondary-color);border:var(--cc-btn-secondary-border);border-radius:var(--cc-btn-secondary-radius)}.cc-btn-primary{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);border:var(--cc-btn-primary-border);border-radius:var(--cc-btn-primary-radius)}.cc-btn-danger{background:var(--cc-btn-danger-bg);color:var(--cc-btn-danger-color);border:var(--cc-btn-danger-border);border-radius:var(--cc-btn-danger-radius)}.cc-btn-warning{background:var(--cc-btn-warning-bg);color:var(--cc-btn-warning-color);border:var(--cc-btn-warning-border);border-radius:var(--cc-btn-warning-radius)}.cc-btn-spinner{width:var(--cc-modal-spinner-size, 1rem);height:var(--cc-modal-spinner-size, 1rem);border:.125rem solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-1.25rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:40rem){.cc-modal-container{width:95vw!important;max-height:95vh}.modal-header,.cc-modal-body{padding:1rem}.cc-modal-footer{padding:.75rem 1rem;flex-direction:column}.cc-modal-footer .cc-btn{width:100%}}.cc-modal-body--form-mode{padding:0;min-height:360px}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper,.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{box-shadow:none!important;border:none!important;padding:0!important;border-radius:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-wrapper{animation:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton{display:flex!important;align-items:center!important;justify-content:center!important;min-height:360px!important;gap:0!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton>*{display:none!important}.cc-modal-body--form-mode ::ng-deep .smart-form-skeleton:after{content:\"\";display:block;width:28px;height:28px;border:3px solid #E5E7EB;border-top-color:#6366f1;border-radius:50%;animation:cc-modal-skeleton-spin .7s linear infinite}.cc-modal-body--form-mode ::ng-deep .form-section-container{box-shadow:none!important;border:none!important}@keyframes cc-modal-skeleton-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
7763
7763
|
}], propDecorators: { config: [{
|
|
7764
7764
|
type: Input
|
|
7765
7765
|
}], isOpen: [{
|
|
@@ -9986,6 +9986,9 @@ class SmartTableComponent {
|
|
|
9986
9986
|
this.loading = true;
|
|
9987
9987
|
this.http.delete(url, { headers: this.getHeaders() }).pipe(finalize(() => this.loading = false)).subscribe({
|
|
9988
9988
|
next: () => {
|
|
9989
|
+
if (this.data.length === 1 && this.currentPage > 1) {
|
|
9990
|
+
this.currentPage--;
|
|
9991
|
+
}
|
|
9989
9992
|
this.loadData();
|
|
9990
9993
|
this.action.emit({ action: item, row });
|
|
9991
9994
|
},
|