commons-shared-web-ui 0.0.13 → 0.0.14
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.
|
@@ -3949,10 +3949,18 @@ class FormFieldComponent {
|
|
|
3949
3949
|
if (this.config.sectionConfig?.allowMulti) {
|
|
3950
3950
|
this.groupFormArray = this.fb.array([]);
|
|
3951
3951
|
this.formGroup.addControl(this.groupKey, this.groupFormArray);
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3952
|
+
const initialData = this.controller.getFieldValue(this.groupKey);
|
|
3953
|
+
if (Array.isArray(initialData) && initialData.length > 0) {
|
|
3954
|
+
initialData.forEach((item) => {
|
|
3955
|
+
this.addGroupInstance(item);
|
|
3956
|
+
});
|
|
3957
|
+
}
|
|
3958
|
+
else {
|
|
3959
|
+
// We always start with at least one instance.
|
|
3960
|
+
// If multi-save is active, it starts in editing mode and is NOT
|
|
3961
|
+
// added to the main form value until the user actually saves it.
|
|
3962
|
+
this.addGroupInstance();
|
|
3963
|
+
}
|
|
3956
3964
|
}
|
|
3957
3965
|
else {
|
|
3958
3966
|
this.groupFormGroup = this.fb.group({});
|
|
@@ -3990,20 +3998,35 @@ class FormFieldComponent {
|
|
|
3990
3998
|
}
|
|
3991
3999
|
});
|
|
3992
4000
|
}
|
|
3993
|
-
addGroupInstance() {
|
|
4001
|
+
addGroupInstance(initialData) {
|
|
3994
4002
|
const fg = this.fb.group({});
|
|
3995
4003
|
const isMultiSave = !!this.config.sectionConfig?.multiSaveConfig?.active;
|
|
4004
|
+
// If initialData exists, treat the instance as already submitted/saved to form
|
|
4005
|
+
const isEditing = initialData ? false : isMultiSave;
|
|
4006
|
+
const isSaved = initialData ? true : !isMultiSave;
|
|
3996
4007
|
const instance = {
|
|
3997
4008
|
id: this._nextInstanceId++,
|
|
3998
4009
|
fg,
|
|
3999
|
-
isEditing
|
|
4000
|
-
isSaved
|
|
4001
|
-
isExpanded: false
|
|
4010
|
+
isEditing,
|
|
4011
|
+
isSaved,
|
|
4012
|
+
isExpanded: false,
|
|
4013
|
+
initialValue: initialData ? { ...initialData } : undefined
|
|
4002
4014
|
};
|
|
4003
|
-
if (
|
|
4015
|
+
if (isSaved) {
|
|
4004
4016
|
this.groupFormArray.push(fg);
|
|
4005
4017
|
}
|
|
4006
4018
|
this.instanceList = [...this.instanceList, instance];
|
|
4019
|
+
if (initialData) {
|
|
4020
|
+
setTimeout(() => {
|
|
4021
|
+
// Ensure that controls exist for all keys in initialData so we don't drop fields like ID!
|
|
4022
|
+
Object.keys(initialData).forEach(key => {
|
|
4023
|
+
if (!fg.contains(key)) {
|
|
4024
|
+
fg.addControl(key, new FormControl(initialData[key]));
|
|
4025
|
+
}
|
|
4026
|
+
});
|
|
4027
|
+
fg.patchValue(initialData);
|
|
4028
|
+
});
|
|
4029
|
+
}
|
|
4007
4030
|
}
|
|
4008
4031
|
saveGroupInstance(index) {
|
|
4009
4032
|
const instance = this.instanceList[index];
|
|
@@ -4720,11 +4743,11 @@ class FormSectionComponent {
|
|
|
4720
4743
|
return result;
|
|
4721
4744
|
}
|
|
4722
4745
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
4723
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{
|
|
4746
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: FormSectionComponent, isStandalone: false, selector: "lib-form-section", inputs: { config: "config", controller: "controller", formGroup: "formGroup" }, ngImport: i0, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\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$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["variant", "type", "disabled", "width", "height", "borderRadius", "fontSize", "fontWeight", "backgroundColor", "color", "border", "icon", "labels"] }, { kind: "component", type: FormFieldComponent, selector: "lib-form-field", inputs: ["config", "controller", "formGroup", "allowMulti"] }] });
|
|
4724
4747
|
}
|
|
4725
4748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
4726
4749
|
type: Component,
|
|
4727
|
-
args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{
|
|
4750
|
+
args: [{ selector: 'lib-form-section', standalone: false, template: "<div class=\"form-section-container\">\r\n <h3 class=\"section-label\" *ngIf=\"config.label && !config.allowMulti\">{{ config.label }}</h3>\r\n\r\n <!-- \u2550\u2550 Repeater (allowMulti) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"config.allowMulti\">\r\n <h3 class=\"section-label\">{{ config.label }}</h3>\r\n\r\n <div *ngFor=\"let instanceGroup of instanceGroups; let i = index\" class=\"section-instance\">\r\n <!-- Instance header (remove button) -->\r\n <div class=\"section-header\" *ngIf=\"instanceGroups.length > 1\">\r\n <span class=\"section-number\">{{ config.label }} #{{ i + 1 }}</span>\r\n <lib-button [variant]=\"'danger-outline'\" (click)=\"removeInstance(i)\">\r\n <mat-icon>delete_outline</mat-icon> Remove\r\n </lib-button>\r\n </div>\r\n\r\n <!-- Fields \u2013 each child rendered with the *instance* FormGroup -->\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"instanceGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <lib-button [variant]=\"'primary'\" (click)=\"addInstance()\">\r\n <mat-icon>add</mat-icon> Add {{ config.label }}\r\n </lib-button>\r\n </ng-container>\r\n\r\n <!-- \u2550\u2550 Non-repeater (single instance) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\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=\"!config.allowMulti\">\r\n <div class=\"section-fields sf-grid\">\r\n <ng-container *ngFor=\"let field of config.children\">\r\n <div class=\"sf-col\" [style.gridColumn]=\"'span ' + (field.colSpan || 12)\">\r\n <lib-form-field [config]=\"field\" [controller]=\"controller\" [formGroup]=\"flatFormGroup\">\r\n </lib-form-field>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n</div>", styles: [".form-section-container{margin-bottom:var(--cc-sf-section-gap, 20px)}.form-section-container .section-label{font-size:var(--cc-sf-section-label-size, 1rem);font-weight:var(--cc-sf-section-label-weight, 600);color:var(--cc-sf-section-label-color, #1F2937);margin:0 0 16px;padding-bottom:10px;border-bottom:var(--cc-sf-section-label-border, 2px solid #E5E7EB)}.form-section-container .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:var(--cc-sf-instance-divider, 1px dashed #D1D5DB)}.form-section-container .section-header .section-number{font-weight:600;font-size:var(--cc-sf-instance-num-size, .8125rem);color:var(--cc-sf-instance-num-color, #4B5563)}.form-section-container .section-header .btn-remove{padding:6px 12px;background:var(--cc-sf-btn-remove-bg, #FFF5F5);color:var(--cc-sf-btn-remove-color, #E53E3E);border:var(--cc-sf-btn-remove-border, 1px solid #FED7D7);border-radius:var(--cc-sf-btn-remove-radius, 4px);cursor:pointer;font-size:12px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-header .btn-remove:hover{background:var(--cc-sf-btn-remove-hover-bg, #FED7D7)}.form-section-container .section-fields.sf-grid{grid-template-columns:repeat(12,1fr);gap:var(--cc-sf-grid-gap, 16px);align-items:start}@media(max-width:640px){.form-section-container .section-fields.sf-grid{grid-template-columns:1fr}.form-section-container .section-fields.sf-grid .sf-col{grid-column:span 12!important}}.form-section-container .section-fields .section-instance{margin-bottom:12px;padding:var(--cc-sf-instance-padding, 16px);background:var(--cc-sf-instance-bg, #F9FAFB);border:var(--cc-sf-instance-border, 1px solid #E5E7EB);border-radius:var(--cc-sf-instance-radius, 8px);transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .section-fields .section-instance:last-of-type{margin-bottom:0}.form-section-container .btn-add-section{display:flex;align-items:center;justify-content:center;width:100%;padding:10px 20px;background:var(--cc-sf-btn-add-bg, transparent);color:var(--cc-sf-btn-add-color, #3B82F6);border:var(--cc-sf-btn-add-border, 1px dashed #CBD5E1);border-radius:var(--cc-sf-btn-add-radius, 6px);cursor:pointer;font-size:var(--cc-sf-btn-font-size, .875rem);font-weight:var(--cc-sf-btn-font-weight, 600);margin-top:16px;transition:var(--cc-sf-btn-transition, all .2s ease)}.form-section-container .btn-add-section:hover{background:var(--cc-sf-btn-add-hover-bg, #EFF6FF);border-color:var(--cc-sf-btn-add-hover-border, #BFDBFE)}\n"] }]
|
|
4728
4751
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
|
|
4729
4752
|
type: Input
|
|
4730
4753
|
}], controller: [{
|