ui-core-abv 0.7.8 → 0.8.0

package/fesm2022/ui-core-abv.mjs

@@ -394,6 +394,7 @@ const DICTIONARY_EN = {
         delete_field_dependency_blocked: 'This field cannot be deleted because another field depends on its value',
         preview_form: 'Preview',
         submit_form: 'Submit',
+        preview_form_label: 'This is just a preview',
         select_field_to_edit: 'Select a field to edit its properties',
         no_fields: 'Add fields to your form',
         base: {
@@ -738,6 +739,7 @@ const DICTIONARY_ES = {
         delete_block_dependency_blocked: 'Este bloque no se puede eliminar porque contiene campos de los que dependen otros campos',
         delete_field_dependency_blocked: 'Este campo no se puede eliminar porque otro campo depende de su valor',
         preview_form: 'Vista previa',
+        preview_form_label: 'Esta es solo una vista previa',
         submit_form: 'Guardar',
         select_field_to_edit: 'Selecciona un campo para editar sus propiedades',
         no_fields: 'Añade campos a tu formulario',
@@ -9497,6 +9499,7 @@ const COMPUTED_FORM_FIELDS = [
         internalIcon: 'ri-key-line',
         tip: 'form_builder.extra.computedSourceKey_tip',
         selectSearchEnabled: true,
+        showSubtitle: true,
         type: 'text'
     },
     {
@@ -10029,11 +10032,11 @@ class FormPreviewComponent {
         console.log(fr.form);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [showButtons]=\"true\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [showButtons]=\"true\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
+            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -10107,6 +10110,7 @@ class FieldEditorComponent {
     editingRuleIndex = signal(-1); // -1 = no se está editando ninguna regla
     isAddingNewRule = signal(false);
     fieldChange = output();
+    nameManuallySet = output();
     localField = signal({ name: '', type: 'text' });
     /* FORM FIELDS */
     requiredFields = this.buildRequiredFields();
@@ -10301,10 +10305,28 @@ class FieldEditorComponent {
         };
         this.localField.set(updatedField);
     }
+    normalizeLabelToName(label) {
+        return (label
+            .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '_')
+            .replace(/^_+|_+$/g, '')) || 'campo';
+    }
     updateFieldValues(fr) {
+        const current = this.localField();
+        const isNameManuallySet = this.config().nameManuallySet ?? false;
+        if (fr['name'] !== undefined && fr['name'] !== current.name) {
+            this.nameManuallySet.emit();
+        }
+        let derivedName;
+        if (!isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
+            const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
+            derivedName = this.normalizeLabelToName(labelStr);
+        }
         const updatedField = {
-            ...this.localField(),
-            ...fr
+            ...current,
+            ...fr,
+            ...(derivedName !== undefined ? { name: derivedName } : {})
         };
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
@@ -10496,7 +10518,7 @@ class FieldEditorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, isSubField: { classPropertyName: "isSubField", publicName: "isSubField", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptionsSourceConfig()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"optionsSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n        @if (hasOptions() && !hasExternalOptionsSource()) {\r\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n        }\r\n    }\r\n    @if (isComputed()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"computedSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n    }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"advancedFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"styleFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">    \r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n@if (!isSubField() && hasExternalValidation()) {\r\n    <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\r\n    <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\r\n        <ui-form-wrapper\r\n            [fields]=\"externalValidationFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (!isSubField()) {\r\n    <div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n    <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n        @if (localField().visibilityRules) {\r\n            <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n            \r\n            <!-- List of existing rules -->\r\n            <div class=\"rules-container\">\r\n                @for (rule of localField().visibilityRules; track $index) {\r\n                    <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\r\n                        <div class=\"rule-content\">\r\n                            <div class=\"rule-text\">\r\n                                <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\r\n                                @if (rule.operator) {\r\n                                    <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\r\n                                }\r\n                                @if (rule.value !== null && rule.value !== undefined) {\r\n                                    <span class=\"rule-value\">{{ rule.value }}</span>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        @if (editingRuleIndex() === -1) {\r\n                            <div class=\"rule-actions\">\r\n                                <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\r\n                                    <i class=\"ri-edit-line\"></i>\r\n                                </button>\r\n                                <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\r\n                                    <i class=\"ri-delete-bin-line\"></i>\r\n                                </button>\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                    <!-- Inline edit form for existing rule -->\r\n                    @if (editingRuleIndex() === $index && !isAddingNewRule()) {\r\n                        <div class=\"rule-editor\">\r\n                            <ui-form-wrapper\r\n                                [fields]=\"branchFields()\" \r\n                                [initialValues]=\"branchInitialValues()\"\r\n                                [externalData]=\"options()\"\r\n                                [cols]=\"1\" \r\n                                (formChange)=\"updateRuleValue($event)\">\r\n                            </ui-form-wrapper>\r\n                            <div class=\"editor-actions\">\r\n                                <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n                                <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n\r\n            <!-- New rule form (only while adding) -->\r\n            @if (isAddingNewRule()) {\r\n                <div class=\"rule-editor new-rule\">\r\n                    <ui-form-wrapper\r\n                        [fields]=\"branchFields()\" \r\n                        [initialValues]=\"branchInitialValues()\"\r\n                        [externalData]=\"options()\"\r\n                        [cols]=\"1\" \r\n                        (formChange)=\"updateRuleValue($event)\">\r\n                    </ui-form-wrapper>\r\n                    <div class=\"editor-actions\">\r\n                        <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n                        <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <!-- Add button (hidden while editing) -->\r\n            @if (editingRuleIndex() === -1) {\r\n                <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, isSubField: { classPropertyName: "isSubField", publicName: "isSubField", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange", nameManuallySet: "nameManuallySet" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptionsSourceConfig()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"optionsSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n        @if (hasOptions() && !hasExternalOptionsSource()) {\r\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n        }\r\n    }\r\n    @if (isComputed()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"computedSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n    }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"advancedFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"styleFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">    \r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n@if (!isSubField() && hasExternalValidation()) {\r\n    <div class=\"props-title\">{{'form_builder.field_editor.external_validation_title' | uicTranslate}} <i (click)=\"toggleSection('external_validation')\" class=\"{{hiddenSections().includes('external_validation') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i></div>\r\n    <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('external_validation')\">\r\n        <ui-form-wrapper\r\n            [fields]=\"externalValidationFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (!isSubField()) {\r\n    <div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n    <div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n        @if (localField().visibilityRules) {\r\n            <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n            \r\n            <!-- List of existing rules -->\r\n            <div class=\"rules-container\">\r\n                @for (rule of localField().visibilityRules; track $index) {\r\n                    <div class=\"rule-card\" [class.editing]=\"editingRuleIndex() === $index && !isAddingNewRule()\">\r\n                        <div class=\"rule-content\">\r\n                            <div class=\"rule-text\">\r\n                                <strong>{{ rule.fieldLabel || rule.fieldName }}</strong>\r\n                                @if (rule.operator) {\r\n                                    <span class=\"rule-operator\">{{ 'form_builder.visibility_operators.' + rule.operator | uicTranslate }}</span>\r\n                                }\r\n                                @if (rule.value !== null && rule.value !== undefined) {\r\n                                    <span class=\"rule-value\">{{ rule.value }}</span>\r\n                                }\r\n                            </div>\r\n                        </div>\r\n                        @if (editingRuleIndex() === -1) {\r\n                            <div class=\"rule-actions\">\r\n                                <button class=\"rule-btn edit\" (click)=\"startEditingRule($index)\" title=\"Editar\">\r\n                                    <i class=\"ri-edit-line\"></i>\r\n                                </button>\r\n                                <button class=\"rule-btn delete\" (click)=\"removeRule($index)\" title=\"Eliminar\">\r\n                                    <i class=\"ri-delete-bin-line\"></i>\r\n                                </button>\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                    <!-- Inline edit form for existing rule -->\r\n                    @if (editingRuleIndex() === $index && !isAddingNewRule()) {\r\n                        <div class=\"rule-editor\">\r\n                            <ui-form-wrapper\r\n                                [fields]=\"branchFields()\" \r\n                                [initialValues]=\"branchInitialValues()\"\r\n                                [externalData]=\"options()\"\r\n                                [cols]=\"1\" \r\n                                (formChange)=\"updateRuleValue($event)\">\r\n                            </ui-form-wrapper>\r\n                            <div class=\"editor-actions\">\r\n                                <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n                                <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n\r\n            <!-- New rule form (only while adding) -->\r\n            @if (isAddingNewRule()) {\r\n                <div class=\"rule-editor new-rule\">\r\n                    <ui-form-wrapper\r\n                        [fields]=\"branchFields()\" \r\n                        [initialValues]=\"branchInitialValues()\"\r\n                        [externalData]=\"options()\"\r\n                        [cols]=\"1\" \r\n                        (formChange)=\"updateRuleValue($event)\">\r\n                    </ui-form-wrapper>\r\n                    <div class=\"editor-actions\">\r\n                        <ui-button color=\"black\" size=\"s\" (click)=\"cancelEditingRule()\">{{'form_builder.field_editor.cancel' | uicTranslate}}</ui-button>\r\n                        <ui-button color=\"primary\" size=\"s\" (click)=\"confirmEditingRule()\">{{'form_builder.field_editor.save' | uicTranslate}}</ui-button>\r\n                    </div>\r\n                </div>\r\n            }\r\n\r\n            <!-- Add button (hidden while editing) -->\r\n            @if (editingRuleIndex() === -1) {\r\n                <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}.rules-container{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rule-card{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--grey-300);border-radius:3px;background:var(--white);font-size:12px}.rule-card.editing{border-color:var(--primary-400, #6366f1);border-bottom:none;border-radius:3px 3px 0 0}.rule-card .rule-content{flex:1;min-width:0}.rule-card .rule-text{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.rule-card .rule-text strong{font-weight:600;color:var(--grey-800)}.rule-card .rule-text .rule-operator{font-style:italic;color:var(--grey-600)}.rule-card .rule-text .rule-value{background:var(--grey-100);padding:0 3px;border-radius:2px;color:var(--grey-800)}.rule-actions{display:flex;gap:4px;flex-shrink:0;margin-left:4px}.rule-btn{background:none;border:none;cursor:pointer;padding:2px 4px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600);transition:color .2s}.rule-btn:hover{color:var(--grey-800)}.rule-btn.delete{color:var(--red-600)}.rule-btn.delete:hover{color:var(--red-800)}.rule-editor{padding:8px;border:1px solid var(--primary-400, #6366f1);border-radius:0 0 3px 3px;background:var(--grey-50);margin-bottom:6px}.rule-editor.new-rule{border-radius:3px;margin-top:4px}.editor-actions{display:flex;gap:4px;margin-top:6px}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
             type: Component,
@@ -10888,6 +10910,34 @@ class UicUserFormbuilderComponent {
                 this.selectedField.set(parentField);
         }
     }
+    onFieldNameManuallySet() {
+        const selected = this.selectedField();
+        if (!selected)
+            return;
+        this.editableBlocks.update(blocks => blocks.map(block => ({
+            ...block,
+            fields: block.fields.map(f => f.code !== selected.code ? f : { ...f, nameManuallySet: true })
+        })));
+        this.selectedField.update(f => f ? { ...f, nameManuallySet: true } : f);
+    }
+    onSubFieldNameManuallySet() {
+        const ctx = this.editingSubField();
+        if (!ctx)
+            return;
+        const updatedSubField = { ...ctx.subField, nameManuallySet: true };
+        this.editingSubField.set({ ...ctx, subField: updatedSubField });
+        this.editableBlocks.update(blocks => blocks.map(block => ({
+            ...block,
+            fields: block.fields.map(f => {
+                if (f.code !== ctx.parentCode)
+                    return f;
+                return {
+                    ...f,
+                    repeaterSubFields: (f.repeaterSubFields ?? []).map(sf => sf.code !== ctx.subField.code ? sf : { ...sf, nameManuallySet: true })
+                };
+            })
+        })));
+    }
     onSubFieldChange(updatedFieldData) {
         const context = this.editingSubField();
         if (!context)
@@ -10935,9 +10985,14 @@ class UicUserFormbuilderComponent {
                 selectOptionsResolver: this.selectOptionsResolver,
                 computedFieldResolver: this.computedFieldResolver
             },
+            title: 'Preview',
             size: 'medium'
         });
     }
+    copySchemaToClipboard() {
+        const schema = this.previewSchema();
+        navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
+    }
     submitForm() {
         const duplicatedFieldName = this.getDuplicatedFieldName();
         if (duplicatedFieldName) {
@@ -11166,7 +11221,7 @@ class UicUserFormbuilderComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, optionSources: { classPropertyName: "optionSources", publicName: "optionSources", isSignal: false, isRequired: false, transformFunction: null }, computedSources: { classPropertyName: "computedSources", publicName: "computedSources", isSignal: false, isRequired: false, transformFunction: null }, validationSources: { classPropertyName: "validationSources", publicName: "validationSources", isSignal: false, isRequired: false, transformFunction: null }, selectOptionsResolver: { classPropertyName: "selectOptionsResolver", publicName: "selectOptionsResolver", isSignal: false, isRequired: false, transformFunction: null }, computedFieldResolver: { classPropertyName: "computedFieldResolver", publicName: "computedFieldResolver", isSignal: false, isRequired: false, transformFunction: null }, externalValidatorResolver: { classPropertyName: "externalValidatorResolver", publicName: "externalValidatorResolver", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div class=\"formeditor-header-row1\">\r\n            <div style=\"flex: 1 1;\">\r\n                {{formTitle}} \r\n                \r\n                <div class=\"cols-selector\"> \r\n                    @if (isReadOnly()) {\r\n                        {{editableCols()}}\r\n                    }@else {\r\n                        <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                    }\r\n                    col(s)</div>\r\n            </div>\r\n            <button class=\"header-expand-btn\" (click)=\"headerRowExpanded.set(!headerRowExpanded())\" [title]=\"headerRowExpanded() ? 'Ocultar opciones de estilo' : 'Opciones de estilo'\">\r\n                <i [class]=\"headerRowExpanded() ? 'ri-arrow-up-s-line' : 'ri-settings-3-line'\"></i>\r\n            </button>\r\n            @if (isReadOnly()) {\r\n                @if (!disabled) {\r\n                    <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n                }\r\n            } @else {\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n                <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n            }\r\n        </div>\r\n        @if (headerRowExpanded()) {\r\n            <div class=\"formeditor-header-row2\">\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableTitleFontSize()\" (ngModelChange)=\"editableTitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableSubtitleFontSize()\" (ngModelChange)=\"editableSubtitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableTitleMargin()\" (ngModelChange)=\"editableTitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableSubtitleMargin()\" (ngModelChange)=\"editableSubtitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            [selectedSubFieldCode]=\"editingSubField()?.subField?.code ?? null\"\r\n                            [selectedSubFieldParentCode]=\"editingSubField()?.parentCode ?? null\"\r\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"subFieldDependencyOptions()\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <div class=\"preview-label\">Preview</div>\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\r\n                    [computedFieldResolver]=\"computedFieldResolver\"\r\n                    [externalValidatorResolver]=\"externalValidatorResolver\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;border-bottom:solid 1px var(--grey-300);display:flex;flex-direction:column}.formeditor-header-row1{padding:5px 10px;align-items:center;display:flex;gap:10px}.formeditor-header-row2{display:flex;align-items:center;gap:4px;padding:4px 10px 6px;flex-wrap:wrap;border-top:solid 1px var(--grey-200);background-color:var(--grey-50)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.preview-label{background-color:var(--yellow-100);color:var(--yellow-600);padding:10px;font-size:13px}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}.subfield-back-header{display:flex;align-items:center;gap:6px;padding:0 0 10px;border-bottom:solid 1px var(--grey-200);margin-bottom:10px;color:var(--grey-500);font-size:12px}.subfield-back-header i{font-size:14px;color:var(--primary-500)}.subfield-back-header span{font-weight:600;color:var(--grey-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-expand-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.header-expand-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.header-expand-btn i{font-size:14px}.schema-opt{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-left:solid 1px var(--grey-300);font-size:11px;color:var(--grey-500)}.schema-opt:first-child{border-left:none}.schema-opt span{white-space:nowrap}.schema-opt-value{font-weight:600;color:var(--grey-700);min-width:20px}.schema-opt input[type=number]{width:52px;height:22px;border:solid 1px var(--grey-300);border-radius:4px;padding:0 4px;font-size:11px;text-align:center;background:#fff;color:var(--grey-800)}.schema-opt input[type=number]:focus{outline:none;border-color:var(--primary-400)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "isSubField", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId", "selectedSubFieldCode", "selectedSubFieldParentCode", "visibilityParentFieldCodes"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField", "notifySelectedSubField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, optionSources: { classPropertyName: "optionSources", publicName: "optionSources", isSignal: false, isRequired: false, transformFunction: null }, computedSources: { classPropertyName: "computedSources", publicName: "computedSources", isSignal: false, isRequired: false, transformFunction: null }, validationSources: { classPropertyName: "validationSources", publicName: "validationSources", isSignal: false, isRequired: false, transformFunction: null }, selectOptionsResolver: { classPropertyName: "selectOptionsResolver", publicName: "selectOptionsResolver", isSignal: false, isRequired: false, transformFunction: null }, computedFieldResolver: { classPropertyName: "computedFieldResolver", publicName: "computedFieldResolver", isSignal: false, isRequired: false, transformFunction: null }, externalValidatorResolver: { classPropertyName: "externalValidatorResolver", publicName: "externalValidatorResolver", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div class=\"formeditor-header-row1\">\r\n            <div style=\"flex: 1 1;\">\r\n                {{formTitle}} \r\n                \r\n                <div class=\"cols-selector\"> \r\n                    @if (isReadOnly()) {\r\n                        {{editableCols()}}\r\n                    }@else {\r\n                        <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                    }\r\n                    col(s)</div>\r\n            </div>\r\n            <button class=\"header-expand-btn\" (click)=\"headerRowExpanded.set(!headerRowExpanded())\" [title]=\"headerRowExpanded() ? 'Ocultar opciones de estilo' : 'Opciones de estilo'\">\r\n                <i [class]=\"headerRowExpanded() ? 'ri-arrow-up-s-line' : 'ri-settings-3-line'\"></i>\r\n            </button>\r\n            @if (isReadOnly()) {\r\n                @if (!disabled) {\r\n                    <button class=\"copy-schema-btn\" title=\"Copiar JSON del formulario\" (click)=\"copySchemaToClipboard()\"><i class=\"ri-file-copy-line\"></i></button>\r\n                    <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n                }\r\n            } @else {\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n                <button class=\"copy-schema-btn\" title=\"Copiar JSON del formulario\" (click)=\"copySchemaToClipboard()\"><i class=\"ri-file-copy-line\"></i></button>\r\n                <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n            }\r\n        </div>\r\n        @if (headerRowExpanded()) {\r\n            <div class=\"formeditor-header-row2\">\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableTitleFontSize()\" (ngModelChange)=\"editableTitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableSubtitleFontSize()\" (ngModelChange)=\"editableSubtitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableTitleMargin()\" (ngModelChange)=\"editableTitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableSubtitleMargin()\" (ngModelChange)=\"editableSubtitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            [selectedSubFieldCode]=\"editingSubField()?.subField?.code ?? null\"\r\n                            [selectedSubFieldParentCode]=\"editingSubField()?.parentCode ?? null\"\r\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"subFieldDependencyOptions()\"\r\n                            (nameManuallySet)=\"onSubFieldNameManuallySet()\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (nameManuallySet)=\"onFieldNameManuallySet()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <div class=\"preview-label\">{{'form_builder.preview_form_label' | uicTranslate}}</div>\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\r\n                    [computedFieldResolver]=\"computedFieldResolver\"\r\n                    [externalValidatorResolver]=\"externalValidatorResolver\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;border-bottom:solid 1px var(--grey-300);display:flex;flex-direction:column}.formeditor-header-row1{padding:5px 10px;align-items:center;display:flex;gap:10px}.formeditor-header-row2{display:flex;align-items:center;gap:4px;padding:4px 10px 6px;flex-wrap:wrap;border-top:solid 1px var(--grey-200);background-color:var(--grey-50)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.preview-label{background-color:var(--yellow-100);color:var(--yellow-600);padding:4px;border-radius:3px;font-size:12px}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}.subfield-back-header{display:flex;align-items:center;gap:6px;padding:0 0 10px;border-bottom:solid 1px var(--grey-200);margin-bottom:10px;color:var(--grey-500);font-size:12px}.subfield-back-header i{font-size:14px;color:var(--primary-500)}.subfield-back-header span{font-weight:600;color:var(--grey-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-expand-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.header-expand-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.header-expand-btn i{font-size:14px}.copy-schema-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.copy-schema-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.copy-schema-btn i{font-size:14px}.schema-opt{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-left:solid 1px var(--grey-300);font-size:11px;color:var(--grey-500)}.schema-opt:first-child{border-left:none}.schema-opt span{white-space:nowrap}.schema-opt-value{font-weight:600;color:var(--grey-700);min-width:20px}.schema-opt input[type=number]{width:52px;height:22px;border:solid 1px var(--grey-300);border-radius:4px;padding:0 4px;font-size:11px;text-align:center;background:#fff;color:var(--grey-800)}.schema-opt input[type=number]:focus{outline:none;border-color:var(--primary-400)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "isSubField", "options"], outputs: ["fieldChange", "nameManuallySet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId", "selectedSubFieldCode", "selectedSubFieldParentCode", "visibilityParentFieldCodes"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField", "notifySelectedSubField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
             type: Component,
@@ -11178,7 +11233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         BlockEditorComponent,
                         UicSelectComponent
-                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div class=\"formeditor-header-row1\">\r\n            <div style=\"flex: 1 1;\">\r\n                {{formTitle}} \r\n                \r\n                <div class=\"cols-selector\"> \r\n                    @if (isReadOnly()) {\r\n                        {{editableCols()}}\r\n                    }@else {\r\n                        <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                    }\r\n                    col(s)</div>\r\n            </div>\r\n            <button class=\"header-expand-btn\" (click)=\"headerRowExpanded.set(!headerRowExpanded())\" [title]=\"headerRowExpanded() ? 'Ocultar opciones de estilo' : 'Opciones de estilo'\">\r\n                <i [class]=\"headerRowExpanded() ? 'ri-arrow-up-s-line' : 'ri-settings-3-line'\"></i>\r\n            </button>\r\n            @if (isReadOnly()) {\r\n                @if (!disabled) {\r\n                    <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n                }\r\n            } @else {\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n                <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n            }\r\n        </div>\r\n        @if (headerRowExpanded()) {\r\n            <div class=\"formeditor-header-row2\">\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableTitleFontSize()\" (ngModelChange)=\"editableTitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableSubtitleFontSize()\" (ngModelChange)=\"editableSubtitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableTitleMargin()\" (ngModelChange)=\"editableTitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableSubtitleMargin()\" (ngModelChange)=\"editableSubtitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            [selectedSubFieldCode]=\"editingSubField()?.subField?.code ?? null\"\r\n                            [selectedSubFieldParentCode]=\"editingSubField()?.parentCode ?? null\"\r\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"subFieldDependencyOptions()\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <div class=\"preview-label\">Preview</div>\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\r\n                    [computedFieldResolver]=\"computedFieldResolver\"\r\n                    [externalValidatorResolver]=\"externalValidatorResolver\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;border-bottom:solid 1px var(--grey-300);display:flex;flex-direction:column}.formeditor-header-row1{padding:5px 10px;align-items:center;display:flex;gap:10px}.formeditor-header-row2{display:flex;align-items:center;gap:4px;padding:4px 10px 6px;flex-wrap:wrap;border-top:solid 1px var(--grey-200);background-color:var(--grey-50)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.preview-label{background-color:var(--yellow-100);color:var(--yellow-600);padding:10px;font-size:13px}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}.subfield-back-header{display:flex;align-items:center;gap:6px;padding:0 0 10px;border-bottom:solid 1px var(--grey-200);margin-bottom:10px;color:var(--grey-500);font-size:12px}.subfield-back-header i{font-size:14px;color:var(--primary-500)}.subfield-back-header span{font-weight:600;color:var(--grey-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-expand-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.header-expand-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.header-expand-btn i{font-size:14px}.schema-opt{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-left:solid 1px var(--grey-300);font-size:11px;color:var(--grey-500)}.schema-opt:first-child{border-left:none}.schema-opt span{white-space:nowrap}.schema-opt-value{font-weight:600;color:var(--grey-700);min-width:20px}.schema-opt input[type=number]{width:52px;height:22px;border:solid 1px var(--grey-300);border-radius:4px;padding:0 4px;font-size:11px;text-align:center;background:#fff;color:var(--grey-800)}.schema-opt input[type=number]:focus{outline:none;border-color:var(--primary-400)}\n"] }]
+                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div class=\"formeditor-header-row1\">\r\n            <div style=\"flex: 1 1;\">\r\n                {{formTitle}} \r\n                \r\n                <div class=\"cols-selector\"> \r\n                    @if (isReadOnly()) {\r\n                        {{editableCols()}}\r\n                    }@else {\r\n                        <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                    }\r\n                    col(s)</div>\r\n            </div>\r\n            <button class=\"header-expand-btn\" (click)=\"headerRowExpanded.set(!headerRowExpanded())\" [title]=\"headerRowExpanded() ? 'Ocultar opciones de estilo' : 'Opciones de estilo'\">\r\n                <i [class]=\"headerRowExpanded() ? 'ri-arrow-up-s-line' : 'ri-settings-3-line'\"></i>\r\n            </button>\r\n            @if (isReadOnly()) {\r\n                @if (!disabled) {\r\n                    <button class=\"copy-schema-btn\" title=\"Copiar JSON del formulario\" (click)=\"copySchemaToClipboard()\"><i class=\"ri-file-copy-line\"></i></button>\r\n                    <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n                }\r\n            } @else {\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n                <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n                <button class=\"copy-schema-btn\" title=\"Copiar JSON del formulario\" (click)=\"copySchemaToClipboard()\"><i class=\"ri-file-copy-line\"></i></button>\r\n                <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n            }\r\n        </div>\r\n        @if (headerRowExpanded()) {\r\n            <div class=\"formeditor-header-row2\">\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableTitleFontSize()\" (ngModelChange)=\"editableTitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_font_size' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleFontSize() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"8\" max=\"72\" [ngModel]=\"editableSubtitleFontSize()\" (ngModelChange)=\"editableSubtitleFontSize.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.title_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableTitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableTitleMargin()\" (ngModelChange)=\"editableTitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n                <div class=\"schema-opt\">\r\n                    <span>{{'form_builder.schema.subtitle_margin' | uicTranslate}}</span>\r\n                    @if (isReadOnly()) {\r\n                        <span class=\"schema-opt-value\">{{editableSubtitleMargin() ?? '\u2014'}}</span>\r\n                    } @else {\r\n                        <input type=\"number\" min=\"0\" [ngModel]=\"editableSubtitleMargin()\" (ngModelChange)=\"editableSubtitleMargin.set($event || null)\" placeholder=\"\u2014\">\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            [selectedSubFieldCode]=\"editingSubField()?.subField?.code ?? null\"\r\n                            [selectedSubFieldParentCode]=\"editingSubField()?.parentCode ?? null\"\r\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"subFieldDependencyOptions()\"\r\n                            (nameManuallySet)=\"onSubFieldNameManuallySet()\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (nameManuallySet)=\"onFieldNameManuallySet()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <div class=\"preview-label\">{{'form_builder.preview_form_label' | uicTranslate}}</div>\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\r\n                    [computedFieldResolver]=\"computedFieldResolver\"\r\n                    [externalValidatorResolver]=\"externalValidatorResolver\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;border-bottom:solid 1px var(--grey-300);display:flex;flex-direction:column}.formeditor-header-row1{padding:5px 10px;align-items:center;display:flex;gap:10px}.formeditor-header-row2{display:flex;align-items:center;gap:4px;padding:4px 10px 6px;flex-wrap:wrap;border-top:solid 1px var(--grey-200);background-color:var(--grey-50)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.preview-label{background-color:var(--yellow-100);color:var(--yellow-600);padding:4px;border-radius:3px;font-size:12px}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}.subfield-back-header{display:flex;align-items:center;gap:6px;padding:0 0 10px;border-bottom:solid 1px var(--grey-200);margin-bottom:10px;color:var(--grey-500);font-size:12px}.subfield-back-header i{font-size:14px;color:var(--primary-500)}.subfield-back-header span{font-weight:600;color:var(--grey-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-expand-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.header-expand-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.header-expand-btn i{font-size:14px}.copy-schema-btn{background:none;border:solid 1px var(--grey-300);border-radius:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--grey-500);flex-shrink:0}.copy-schema-btn:hover{background-color:var(--grey-100);color:var(--grey-700)}.copy-schema-btn i{font-size:14px}.schema-opt{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border-left:solid 1px var(--grey-300);font-size:11px;color:var(--grey-500)}.schema-opt:first-child{border-left:none}.schema-opt span{white-space:nowrap}.schema-opt-value{font-weight:600;color:var(--grey-700);min-width:20px}.schema-opt input[type=number]{width:52px;height:22px;border:solid 1px var(--grey-300);border-radius:4px;padding:0 4px;font-size:11px;text-align:center;background:#fff;color:var(--grey-800)}.schema-opt input[type=number]:focus{outline:none;border-color:var(--primary-400)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], formTitle: [{