ui-core-abv 0.7.9 → 0.8.1

package/fesm2022/ui-core-abv.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, output, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, output, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input, contentChildren } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormBuilder, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, map, isObservable, from, Subscription } from 'rxjs';
@@ -356,6 +356,12 @@ const DICTIONARY_EN = {
         next: 'Next',
         submit: 'Send',
     },
+    wizard: {
+        back: 'Previous',
+        next: 'Next',
+        finish: 'Finish',
+        step_of: 'Step {{current}} of {{total}}',
+    },
     work_panel: {
         minimize: 'Minimize',
         expand: 'Expand',
@@ -394,6 +400,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: {
@@ -701,6 +708,12 @@ const DICTIONARY_ES = {
         next: 'Siguiente',
         submit: 'Enviar',
     },
+    wizard: {
+        back: 'Anterior',
+        next: 'Siguiente',
+        finish: 'Finalizar',
+        step_of: 'Paso {{current}} de {{total}}',
+    },
     work_panel: {
         minimize: 'Minimizar',
         expand: 'Agrandar',
@@ -738,6 +751,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',
@@ -9445,6 +9459,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class UicWizardStepComponent {
+    title = input('');
+    formRef = input(null);
+    validateFn = input(null);
+    canSkip = input(false);
+    /** Controlled by UicWizardComponent via effect */
+    isActive = signal(false);
+    validate() {
+        if (this.canSkip())
+            return true;
+        const form = this.formRef();
+        let formValid = true;
+        if (form) {
+            form.markAllAsTouched();
+            formValid = form.valid;
+        }
+        const fn = this.validateFn();
+        const fnValid = fn ? fn() : true;
+        return formValid && fnValid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: UicWizardStepComponent, isStandalone: true, selector: "uic-wizard-step", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, formRef: { classPropertyName: "formRef", publicName: "formRef", isSignal: true, isRequired: false, transformFunction: null }, validateFn: { classPropertyName: "validateFn", publicName: "validateFn", isSignal: true, isRequired: false, transformFunction: null }, canSkip: { classPropertyName: "canSkip", publicName: "canSkip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wizard-step--hidden": "!isActive()" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}:host(.wizard-step--hidden){display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uic-wizard-step', imports: [], template: `<ng-content></ng-content>`, host: { '[class.wizard-step--hidden]': '!isActive()' }, styles: [":host{display:block}:host(.wizard-step--hidden){display:none}\n"] }]
+        }] });
+
+class UicWizardComponent {
+    steps = contentChildren(UicWizardStepComponent);
+    navigationEnabled = input(false);
+    buttonsColor = input('black');
+    stepChange = output();
+    wizardComplete = output();
+    currentIdx = signal(0);
+    isFirst = computed(() => this.currentIdx() === 0);
+    isLast = computed(() => this.currentIdx() === this.steps().length - 1);
+    stepTitles = computed(() => this.steps().map(s => s.title()));
+    constructor() {
+        effect(() => {
+            const steps = this.steps();
+            const current = this.currentIdx();
+            steps.forEach((step, i) => step.isActive.set(i === current));
+        });
+    }
+    next() {
+        const step = this.steps()[this.currentIdx()];
+        if (!step?.validate())
+            return;
+        if (!this.isLast()) {
+            this.currentIdx.update(i => i + 1);
+            this.stepChange.emit(this.currentIdx());
+        }
+        else {
+            this.wizardComplete.emit();
+        }
+    }
+    back() {
+        if (!this.isFirst()) {
+            this.currentIdx.update(i => i - 1);
+            this.stepChange.emit(this.currentIdx());
+        }
+    }
+    goTo(index) {
+        if (this.navigationEnabled() && index >= 0 && index < this.steps().length) {
+            this.currentIdx.set(index);
+            this.stepChange.emit(index);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWizardComponent, isStandalone: true, selector: "uic-wizard", inputs: { navigationEnabled: { classPropertyName: "navigationEnabled", publicName: "navigationEnabled", isSignal: true, isRequired: false, transformFunction: null }, buttonsColor: { classPropertyName: "buttonsColor", publicName: "buttonsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange", wizardComplete: "wizardComplete" }, queries: [{ propertyName: "steps", predicate: UicWizardStepComponent, isSignal: true }], ngImport: i0, template: "<div class=\"wizard\">\r\n\r\n  <!-- Breadcrumb -->\r\n  <div class=\"wizard-breadcrumb\">\r\n    @for (title of stepTitles(); track $index) {\r\n      @if (!$first) {\r\n        <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n      }\r\n      <div class=\"wizard-step-dot\"\r\n           [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n           [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n           [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n           (click)=\"goTo($index)\">\r\n        <div class=\"wizard-step-circle\">\r\n          @if ($index < currentIdx()) {\r\n            <span>\u2713</span>\r\n          } @else {\r\n            <span>{{ $index + 1 }}</span>\r\n          }\r\n        </div>\r\n        <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div class=\"wizard-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"wizard-footer\">\r\n    <span class=\"wizard-counter\">\r\n      {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n    </span>\r\n    <div class=\"wizard-footer-buttons\">\r\n      <ui-button\r\n        [color]=\"buttonsColor()\"\r\n        type=\"bordered\"\r\n        [disabled]=\"isFirst()\"\r\n        (click)=\"back()\">\r\n        {{ 'wizard.back' | uicTranslate }}\r\n      </ui-button>\r\n      <ui-button\r\n        [color]=\"buttonsColor()\"\r\n        (click)=\"next()\">\r\n        {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n      </ui-button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:16px;border:solid 1px var(--grey-300)}.wizard-breadcrumb{display:flex;padding:5px 20px;align-items:flex-start}.wizard-step-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;color:var(--grey-600);border:2px solid var(--grey-500);justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box}.wizard-step-label{font-size:12px;color:var(--grey-600);text-align:center;max-width:80px}.wizard-step-label--active{color:var(--primary-700);font-weight:700}.wizard-step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}.wizard-step-dot--clickable{cursor:pointer}.wizard-step-dot--done>.wizard-step-circle{background-color:var(--primary-700);border-color:var(--primary-700);color:#fff}.wizard-step-dot--active>.wizard-step-circle{background-color:#fff;border-color:var(--primary-700);color:var(--primary-700)}.wizard-connector{flex:1;height:2px;margin-top:17px;align-self:flex-start;background-color:var(--grey-300)}.wizard-connector--done{background-color:var(--primary-700)}.wizard-body{background-color:#fff;padding:20px;flex:1}.wizard-footer{padding:0 20px;display:flex;justify-content:space-between;align-items:center}.wizard-footer-buttons{display:flex;gap:8px}.wizard-counter{font-size:13px;font-weight:300;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uic-wizard', imports: [UicButtonComponent, UicTranslatePipe], template: "<div class=\"wizard\">\r\n\r\n  <!-- Breadcrumb -->\r\n  <div class=\"wizard-breadcrumb\">\r\n    @for (title of stepTitles(); track $index) {\r\n      @if (!$first) {\r\n        <div class=\"wizard-connector\" [class.wizard-connector--done]=\"$index <= currentIdx()\"></div>\r\n      }\r\n      <div class=\"wizard-step-dot\"\r\n           [class.wizard-step-dot--done]=\"$index < currentIdx()\"\r\n           [class.wizard-step-dot--active]=\"$index === currentIdx()\"\r\n           [class.wizard-step-dot--clickable]=\"navigationEnabled()\"\r\n           (click)=\"goTo($index)\">\r\n        <div class=\"wizard-step-circle\">\r\n          @if ($index < currentIdx()) {\r\n            <span>\u2713</span>\r\n          } @else {\r\n            <span>{{ $index + 1 }}</span>\r\n          }\r\n        </div>\r\n        <span class=\"wizard-step-label\" [class.wizard-step-label--active]=\"$index === currentIdx()\">{{ title }}</span>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Content -->\r\n  <div class=\"wizard-body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"wizard-footer\">\r\n    <span class=\"wizard-counter\">\r\n      {{ 'wizard.step_of' | uicTranslate: { current: currentIdx() + 1, total: steps().length } }}\r\n    </span>\r\n    <div class=\"wizard-footer-buttons\">\r\n      <ui-button\r\n        [color]=\"buttonsColor()\"\r\n        type=\"bordered\"\r\n        [disabled]=\"isFirst()\"\r\n        (click)=\"back()\">\r\n        {{ 'wizard.back' | uicTranslate }}\r\n      </ui-button>\r\n      <ui-button\r\n        [color]=\"buttonsColor()\"\r\n        (click)=\"next()\">\r\n        {{ isLast() ? ('wizard.finish' | uicTranslate) : ('wizard.next' | uicTranslate) }}\r\n      </ui-button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.wizard{background-color:var(--grey-100);border-radius:10px;padding:10px 0;display:flex;flex-direction:column;gap:16px;border:solid 1px var(--grey-300)}.wizard-breadcrumb{display:flex;padding:5px 20px;align-items:flex-start}.wizard-step-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;color:var(--grey-600);border:2px solid var(--grey-500);justify-content:center;font-size:14px;font-weight:600;box-sizing:border-box}.wizard-step-label{font-size:12px;color:var(--grey-600);text-align:center;max-width:80px}.wizard-step-label--active{color:var(--primary-700);font-weight:700}.wizard-step-dot{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}.wizard-step-dot--clickable{cursor:pointer}.wizard-step-dot--done>.wizard-step-circle{background-color:var(--primary-700);border-color:var(--primary-700);color:#fff}.wizard-step-dot--active>.wizard-step-circle{background-color:#fff;border-color:var(--primary-700);color:var(--primary-700)}.wizard-connector{flex:1;height:2px;margin-top:17px;align-self:flex-start;background-color:var(--grey-300)}.wizard-connector--done{background-color:var(--primary-700)}.wizard-body{background-color:#fff;padding:20px;flex:1}.wizard-footer{padding:0 20px;display:flex;justify-content:space-between;align-items:center}.wizard-footer-buttons{display:flex;gap:8px}.wizard-counter{font-size:13px;font-weight:300;color:var(--grey-600)}\n"] }]
+        }], ctorParameters: () => [] });
+
 const simpleFade = trigger('simpleFade', [
     transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
@@ -9497,6 +9588,7 @@ const COMPUTED_FORM_FIELDS = [
         internalIcon: 'ri-key-line',
         tip: 'form_builder.extra.computedSourceKey_tip',
         selectSearchEnabled: true,
+        showSubtitle: true,
         type: 'text'
     },
     {
@@ -10029,11 +10121,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]
@@ -10102,6 +10194,7 @@ class FieldEditorComponent {
     config = input.required();
     focusRequiredField = input(false);
     isSubField = input(false);
+    enableNameModify = input(false);
     options = input({});
     hiddenSections = signal([]);
     editingRuleIndex = signal(-1); // -1 = no se está editando ninguna regla
@@ -10110,7 +10203,15 @@ class FieldEditorComponent {
     nameManuallySet = output();
     localField = signal({ name: '', type: 'text' });
     /* FORM FIELDS */
-    requiredFields = this.buildRequiredFields();
+    requiredFields = computed(() => {
+        const all = BASE_FORM_FIELDS.map(field => ({
+            ...field,
+            label: this.translateService.translate(field.label ?? ''),
+            placeholder: field.placeholder ? this.translateService.translate(field.placeholder) : this.translateService.translate(field.label ?? ''),
+            tip: field.tip ? this.translateService.translate(field.tip) : field.tip
+        }));
+        return this.enableNameModify() ? all : all.filter(f => f.name !== 'name');
+    });
     optionsSourceFields = computed(() => this.buildOptionsSourceFields());
     computedSourceFields = computed(() => this.buildComputedSourceFields());
     advancedFields = computed(() => (this.buildAdvancedBlocks()));
@@ -10311,12 +10412,13 @@ class FieldEditorComponent {
     }
     updateFieldValues(fr) {
         const current = this.localField();
+        const isAutoName = /^(field|sf)_\d+$/.test(current.name ?? '');
         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) {
+        if (isAutoName && !isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
             const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
             derivedName = this.normalizeLabelToName(labelStr);
         }
@@ -10348,14 +10450,6 @@ class FieldEditorComponent {
             this.hiddenSections.set([...currentHidden, section]);
         }
     }
-    buildRequiredFields() {
-        return BASE_FORM_FIELDS.map(field => ({
-            ...field,
-            label: this.translateService.translate(field.label ?? ''),
-            placeholder: field.placeholder ? this.translateService.translate(field.placeholder) : this.translateService.translate(field.label ?? ''),
-            tip: field.tip ? this.translateService.translate(field.tip) : field.tip
-        }));
-    }
     buildDesignBlocks() {
         const fieldType = this.fieldType();
         if (!fieldType)
@@ -10515,7 +10609,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", 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"] }] });
+    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 }, enableNameModify: { classPropertyName: "enableNameModify", publicName: "enableNameModify", 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,
@@ -10524,7 +10618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
@@ -10555,6 +10649,7 @@ class BlockEditorComponent {
     deleteBlock = output();
     notifySelectedField = output();
     notifySelectedSubField = output();
+    notifyNewSubField = output();
     selectedFieldId = input(null);
     selectedSubFieldCode = input(null);
     selectedSubFieldParentCode = input(null);
@@ -10612,6 +10707,7 @@ class BlockEditorComponent {
         };
         this.updateSubFields(parentCode, [...existing, newSf]);
         this.notifySelectedSubField.emit({ parentCode, subField: newSf });
+        this.notifyNewSubField.emit({ parentCode, subField: newSf });
     }
     deleteSubField(parentCode, sfCode, event) {
         event.stopPropagation();
@@ -10686,7 +10782,7 @@ class BlockEditorComponent {
         this.blockChange.emit({ ...this.block(), fields: nextFields });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldCode: { classPropertyName: "selectedSubFieldCode", publicName: "selectedSubFieldCode", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldParentCode: { classPropertyName: "selectedSubFieldParentCode", publicName: "selectedSubFieldParentCode", isSignal: true, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField", notifySelectedSubField: "notifySelectedSubField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n        </div>\r\n        <ui-button\r\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n            [disabled]=\"isBlockVisibilityParent()\"\r\n            (click)=\"requestDeleteBlock($event)\"\r\n            size=\"s\"\r\n            icon=\"ri-delete-bin-line\"\r\n            color=\"red\"\r\n            type=\"ghost\"\r\n            [iconOnly]=\"true\">\r\n        </ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n            <div class=\"field-with-subfields\">\r\n                <div\r\n                    class=\"xfield-card\"\r\n                    cdkDrag\r\n                    [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n                    (click)=\"selectField(edtField)\">\r\n                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                    <div class=\"xfield-card-icon\">\r\n                        <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n                    </div>\r\n                    <div class=\"xfield-card-body\">\r\n                        <b> {{edtField.fieldData.label}} \r\n                            @if(edtField.fieldData.visibilityRules) {\r\n                                <i class=\"branched-field ri-git-merge-line\"></i> \r\n                                <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\r\n                            }\r\n                        </b>\r\n                        <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n                    </div>\r\n                    <div class=\"xfield-card-actions\">\r\n                        @if (edtField.fieldData.type === 'repeater') {\r\n                            <ui-button\r\n                                [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n                                size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                (click)=\"toggleRepeater(edtField.code, $event)\">\r\n                            </ui-button>\r\n                        }\r\n                        <ui-button\r\n                            [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n                            [disabled]=\"isVisibilityParent(edtField.code)\"\r\n                            (click)=\"deleteField(edtField.code, $event)\"\r\n                            size=\"s\"\r\n                            icon=\"ri-delete-bin-line\"\r\n                            color=\"red\"\r\n                            type=\"ghost\"\r\n                            [iconOnly]=\"true\">\r\n                        </ui-button>\r\n                    </div>\r\n                </div>\r\n\r\n                @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n                    <div class=\"repeater-inline-panel\">\r\n                        <div\r\n                            class=\"repeater-subfields-list\"\r\n                            cdkDropList\r\n                            [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n                            (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n                            @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n                                <div\r\n                                    class=\"xfield-card subfield-card\"\r\n                                    cdkDrag\r\n                                    [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n                                    (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n                                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n                                    <div class=\"xfield-card-icon\">\r\n                                        <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-body\">\r\n                                        <b>{{ sf.fieldData.label || sf.fieldData.name }}</b>\r\n                                        <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-actions\">\r\n                                        <ui-button\r\n                                            size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                            (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n                                        </ui-button>\r\n                                    </div>\r\n                                </div>\r\n                            } @empty {\r\n                                <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"new-subfield\">\r\n                            {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n                            <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FieldTypeSelectorComponent, selector: "lib-field-type-selector", inputs: ["excludeTypes"], outputs: ["selectType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldCode: { classPropertyName: "selectedSubFieldCode", publicName: "selectedSubFieldCode", isSignal: true, isRequired: false, transformFunction: null }, selectedSubFieldParentCode: { classPropertyName: "selectedSubFieldParentCode", publicName: "selectedSubFieldParentCode", isSignal: true, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField", notifySelectedSubField: "notifySelectedSubField", notifyNewSubField: "notifyNewSubField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_message' | uicTranslate\" [ngModel]=\"block().message\" (ngModelChange)=\"changeMessage($event)\">\r\n        </div>\r\n        <ui-button\r\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n            [disabled]=\"isBlockVisibilityParent()\"\r\n            (click)=\"requestDeleteBlock($event)\"\r\n            size=\"s\"\r\n            icon=\"ri-delete-bin-line\"\r\n            color=\"red\"\r\n            type=\"ghost\"\r\n            [iconOnly]=\"true\">\r\n        </ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n            <div class=\"field-with-subfields\">\r\n                <div\r\n                    class=\"xfield-card\"\r\n                    cdkDrag\r\n                    [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n                    (click)=\"selectField(edtField)\">\r\n                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                    <div class=\"xfield-card-icon\">\r\n                        <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n                    </div>\r\n                    <div class=\"xfield-card-body\">\r\n                        <b> {{edtField.fieldData.label}} \r\n                            @if(edtField.fieldData.visibilityRules) {\r\n                                <i class=\"branched-field ri-git-merge-line\"></i> \r\n                                <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\r\n                            }\r\n                        </b>\r\n                        <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n                    </div>\r\n                    <div class=\"xfield-card-actions\">\r\n                        @if (edtField.fieldData.type === 'repeater') {\r\n                            <ui-button\r\n                                [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n                                size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                (click)=\"toggleRepeater(edtField.code, $event)\">\r\n                            </ui-button>\r\n                        }\r\n                        <ui-button\r\n                            [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n                            [disabled]=\"isVisibilityParent(edtField.code)\"\r\n                            (click)=\"deleteField(edtField.code, $event)\"\r\n                            size=\"s\"\r\n                            icon=\"ri-delete-bin-line\"\r\n                            color=\"red\"\r\n                            type=\"ghost\"\r\n                            [iconOnly]=\"true\">\r\n                        </ui-button>\r\n                    </div>\r\n                </div>\r\n\r\n                @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n                    <div class=\"repeater-inline-panel\">\r\n                        <div\r\n                            class=\"repeater-subfields-list\"\r\n                            cdkDropList\r\n                            [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n                            (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n                            @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n                                <div\r\n                                    class=\"xfield-card subfield-card\"\r\n                                    cdkDrag\r\n                                    [class.selected-field]=\"selectedSubFieldCode() === sf.code && edtField.code === selectedSubFieldParentCode()\"\r\n                                    (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n                                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n                                    <div class=\"xfield-card-icon\">\r\n                                        <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-body\">\r\n                                        <b>{{ sf.fieldData.label || sf.fieldData.name }}</b>\r\n                                        <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-actions\">\r\n                                        <ui-button\r\n                                            size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                            (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n                                        </ui-button>\r\n                                    </div>\r\n                                </div>\r\n                            } @empty {\r\n                                <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"new-subfield\">\r\n                            {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n                            <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FieldTypeSelectorComponent, selector: "lib-field-type-selector", inputs: ["excludeTypes"], outputs: ["selectType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
             type: Component,
@@ -10715,6 +10811,7 @@ class UicUserFormbuilderComponent {
     computedFieldResolver;
     externalValidatorResolver;
     readOnly = input(true);
+    enableNameModify = input(false);
     editableFormInput = input({ cols: 2, blocks: [] }, { alias: 'editableForm' });
     submitFormRequest = output();
     nextBlockId = 1;
@@ -10731,6 +10828,7 @@ class UicUserFormbuilderComponent {
     selectedField = signal(null);
     editingSubField = signal(null);
     focusNewFieldCode = signal(null);
+    focusNewSubFieldCode = signal(null);
     propertiesWidth = signal(250);
     previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols(), true, {
         titleFontSize: this.editableTitleFontSize() ?? undefined,
@@ -10894,9 +10992,11 @@ class UicUserFormbuilderComponent {
     selectField(field) {
         this.selectedField.set(field);
         this.focusNewFieldCode.set(null);
+        this.focusNewSubFieldCode.set(null);
         this.editingSubField.set(null);
     }
     onSelectSubField(event) {
+        this.focusNewSubFieldCode.set(null);
         this.editingSubField.set(event);
         if (event) {
             // Highlight the parent repeater field in the block (deselect root selection)
@@ -10917,23 +11017,8 @@ class UicUserFormbuilderComponent {
         })));
         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 })
-                };
-            })
-        })));
+    onNewSubField(event) {
+        this.focusNewSubFieldCode.set(event.subField.code);
     }
     onSubFieldChange(updatedFieldData) {
         const context = this.editingSubField();
@@ -10982,6 +11067,7 @@ class UicUserFormbuilderComponent {
                 selectOptionsResolver: this.selectOptionsResolver,
                 computedFieldResolver: this.computedFieldResolver
             },
+            title: 'Preview',
             size: 'medium'
         });
     }
@@ -10990,21 +11076,28 @@ class UicUserFormbuilderComponent {
         navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
     }
     submitForm() {
-        const duplicatedFieldName = this.getDuplicatedFieldName();
-        if (duplicatedFieldName) {
-            this.tinyAlertService.warning(this.translateService.translate('form_builder.validation.duplicate_identifier', {
-                identifier: duplicatedFieldName
-            }));
-            return;
+        if (this.enableNameModify()) {
+            const duplicatedFieldName = this.getDuplicatedFieldName();
+            if (duplicatedFieldName) {
+                this.tinyAlertService.warning(this.translateService.translate('form_builder.validation.duplicate_identifier', {
+                    identifier: duplicatedFieldName
+                }));
+                return;
+            }
         }
-        const blocksWithOrderedFields = this.editableBlocks().map(block => ({
+        let blocksWithOrderedFields = this.editableBlocks().map(block => ({
             ...block,
             fields: block.fields.map((field, index) => ({
                 ...field,
                 order: index + 1,
-                fieldData: this.prepareFieldDataForSubmit(field.fieldData)
+                nameManuallySet: true,
+                fieldData: this.prepareFieldDataForSubmit(field.fieldData),
+                repeaterSubFields: field.repeaterSubFields?.map(sf => ({ ...sf, nameManuallySet: true }))
             }))
         }));
+        if (!this.enableNameModify()) {
+            blocksWithOrderedFields = this.deduplicateFieldNames(blocksWithOrderedFields);
+        }
         this.editableBlocks.set(blocksWithOrderedFields);
         this.isReadOnly.set(true);
         this.editingSnapshot.set(null);
@@ -11023,6 +11116,25 @@ class UicUserFormbuilderComponent {
             }))
         });
     }
+    deduplicateFieldNames(blocks) {
+        const usedNames = new Set();
+        return blocks.map(block => ({
+            ...block,
+            fields: block.fields.map(field => {
+                let name = field.fieldData.name ?? '';
+                if (usedNames.has(name)) {
+                    let suffix = 2;
+                    while (usedNames.has(`${name}_${suffix}`))
+                        suffix++;
+                    name = `${name}_${suffix}`;
+                }
+                usedNames.add(name);
+                return name !== field.fieldData.name
+                    ? { ...field, fieldData: { ...field.fieldData, name } }
+                    : field;
+            })
+        }));
+    }
     getDuplicatedFieldName() {
         const usedNames = new Set();
         for (const field of this.editableBlocks().flatMap(block => block.fields)) {
@@ -11090,7 +11202,15 @@ class UicUserFormbuilderComponent {
         }
     }
     prepareBlocksForLocalState(blocks) {
-        return this.hydrateBlocks(this.deepClone(blocks));
+        const hydrated = this.hydrateBlocks(this.deepClone(blocks));
+        return hydrated.map(block => ({
+            ...block,
+            fields: block.fields.map(f => ({
+                ...f,
+                nameManuallySet: true,
+                repeaterSubFields: f.repeaterSubFields?.map(sf => ({ ...sf, nameManuallySet: true }))
+            }))
+        }));
     }
     syncLocalCounters(blocks) {
         this.nextBlockId = this.getNextCodeId(blocks.map(block => block.code), 'block_');
@@ -11217,7 +11337,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                    <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\">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}.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"] }] });
+    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 }, enableNameModify: { classPropertyName: "enableNameModify", publicName: "enableNameModify", 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                            (notifyNewSubField)=\"onNewSubField($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                            [focusRequiredField]=\"focusNewSubFieldCode() === editingSubField()?.subField?.code\"\r\n                            [enableNameModify]=\"enableNameModify()\"\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                            [enableNameModify]=\"enableNameModify()\"\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\">{{'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", "enableNameModify", "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", "notifyNewSubField"] }, { 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,
@@ -11229,7 +11349,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                    <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\">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}.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"] }]
+                    ], 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                            (notifyNewSubField)=\"onNewSubField($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                            [focusRequiredField]=\"focusNewSubFieldCode() === editingSubField()?.subField?.code\"\r\n                            [enableNameModify]=\"enableNameModify()\"\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                            [enableNameModify]=\"enableNameModify()\"\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\">{{'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: [{
@@ -12055,5 +12175,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BASE_FORM_FIELDS, BRANCH_FORM_FIELDS, COMPUTED_FORM_FIELDS, DROPDOWN_OVERLAY_CONTROLS, EXTERNAL_VALIDATION_FORM_FIELDS, EXTRA_FORM_FIELDS, FIELDS_CONFIG, FirstCapitalPipe, LAYOUT_FORM_FIELDS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UIC_TRANSLATE_CONFIG, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicEditableTableComponent, UicExcelTableComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicProgressBarComponent, UicPushAlertService, UicRadioComponent, UicRepeaterComponent, UicRuleBuilderComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonCardsComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTextareaAutoresizeDirective, UicTextareaAutoresizeMaxRowsDirective, UicTextareaAutoresizeMinRowsDirective, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTranslatePipe, UicTranslateService, UicTreeAdminComponent, UicUserFormbuilderComponent, UicWorkPanelComponent, VISIBILITY_OPERATOR_OPTIONS, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperShowFormFromBuilder, helperTableMapDatoToColums, highlightRow, isMobile, provideUicTranslateConfig, pushTop, sideModal, simpleFade };
+export { BASE_FORM_FIELDS, BRANCH_FORM_FIELDS, COMPUTED_FORM_FIELDS, DROPDOWN_OVERLAY_CONTROLS, EXTERNAL_VALIDATION_FORM_FIELDS, EXTRA_FORM_FIELDS, FIELDS_CONFIG, FirstCapitalPipe, LAYOUT_FORM_FIELDS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UIC_TRANSLATE_CONFIG, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicEditableTableComponent, UicExcelTableComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicProgressBarComponent, UicPushAlertService, UicRadioComponent, UicRepeaterComponent, UicRuleBuilderComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonCardsComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTextareaAutoresizeDirective, UicTextareaAutoresizeMaxRowsDirective, UicTextareaAutoresizeMinRowsDirective, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTranslatePipe, UicTranslateService, UicTreeAdminComponent, UicUserFormbuilderComponent, UicWizardComponent, UicWizardStepComponent, UicWorkPanelComponent, VISIBILITY_OPERATOR_OPTIONS, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperShowFormFromBuilder, helperTableMapDatoToColums, highlightRow, isMobile, provideUicTranslateConfig, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map