ui-core-abv 0.9.0 → 0.9.2

package/fesm2022/ui-core-abv.mjs

@@ -407,6 +407,7 @@ const DICTIONARY_EN = {
         base: {
             name: 'Key',
             required: 'Required',
+            hidden: 'Hidden',
             icon: 'Icon',
             label: 'Label',
             tip: 'Hint',
@@ -555,6 +556,13 @@ const DICTIONARY_EN = {
             duplicate_identifier: 'The identifier "{{identifier}}" is used more than once.',
             duplicate_identifier_title: 'Validation error',
         },
+        import: {
+            invalid_schema: 'The file does not contain a valid form configuration.',
+            invalid_schema_title: 'Invalid file',
+            confirm_overwrite: 'This will replace the form you are currently editing. Do you want to continue?',
+            confirm_overwrite_title: 'Load configuration',
+            confirm_overwrite_ok: 'Load and replace',
+        },
         repeater: {
             no_subfields: 'No sub-fields yet. Add one below.',
             add_subfield: 'Add sub-field',
@@ -760,6 +768,7 @@ const DICTIONARY_ES = {
         base: {
             name: 'Identificador',
             required: 'Obligatorio',
+            hidden: 'Oculto',
             icon: 'Ícono externo',
             label: 'Etiqueta de campo',
             tip: 'Sugerencia',
@@ -908,6 +917,13 @@ const DICTIONARY_ES = {
             duplicate_identifier: 'El identificador "{{identifier}}" se está usando más de una vez.',
             duplicate_identifier_title: 'Error de validación',
         },
+        import: {
+            invalid_schema: 'El archivo no contiene una configuración de formulario válida.',
+            invalid_schema_title: 'Archivo inválido',
+            confirm_overwrite: 'Esto reemplazará el formulario que estás editando. ¿Deseas continuar?',
+            confirm_overwrite_title: 'Cargar configuración',
+            confirm_overwrite_ok: 'Cargar y reemplazar',
+        },
         repeater: {
             no_subfields: 'Sin sub-campos. Añade uno abajo.',
             add_subfield: 'Agregar sub-campo',
@@ -4203,7 +4219,7 @@ class UicRepeaterComponent {
     }
     mapValidatorsFromField(field) {
         const validators = [];
-        if (field.required)
+        if (field.required && !field.hidden)
             validators.push(Validators.required);
         if (typeof field.min === 'number')
             validators.push(Validators.min(field.min));
@@ -4885,7 +4901,7 @@ class UicDynamicFormComponent {
         recognition.start();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", isSubForm: "isSubForm", form: "form", disabled: "disabled", externalValidationStates: "externalValidationStates", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver", parentFormValues: "parentFormValues" }, outputs: { fieldBlur: "fieldBlur" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicMultySearcherComponent, selector: "ui-multy-searcher", inputs: ["icon", "iconColor", "internalIcon", "label", "error", "tip", "disabled", "loading", "minimumSearchLength", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { 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"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicRepeaterComponent, selector: "ui-repeater", inputs: ["formArray", "field", "cols", "error", "fileUidResolverFn", "selectOptionsResolver", "parentForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", isSubForm: "isSubForm", form: "form", disabled: "disabled", externalValidationStates: "externalValidationStates", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver", parentFormValues: "parentFormValues" }, outputs: { fieldBlur: "fieldBlur" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    @if (!field.hidden) {\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicMultySearcherComponent, selector: "ui-multy-searcher", inputs: ["icon", "iconColor", "internalIcon", "label", "error", "tip", "disabled", "loading", "minimumSearchLength", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { 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"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicRepeaterComponent, selector: "ui-repeater", inputs: ["formArray", "field", "cols", "error", "fileUidResolverFn", "selectOptionsResolver", "parentForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -4911,7 +4927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicPhoneInputComponent,
                         FormsModule,
                         UicRepeaterComponent
-                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
+                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    @if (!field.hidden) {\r\n    <div [style.grid-column]=\"getGridColumn(field)\" (focusout)=\"onFieldContainerFocusout(field, $event)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [showSubtitle]=\"field.showSubtitle??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'multisearcher') {\r\n        <ui-multy-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-multy-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [selectOptionsResolver]=\"selectOptionsResolver\"\r\n          [parentForm]=\"form\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
             }], isSubForm: [{
@@ -5103,7 +5119,7 @@ class UicFormWrapperComponent {
             newForm.addControl(field.name, this.fb.control(controlState, validators));
         });
         repeaterFields.forEach(field => {
-            const arrayValidators = field.required
+            const arrayValidators = field.required && !field.hidden
                 ? [this.repeaterArrayValidator(field.repeaterMinItems ?? 1)]
                 : [];
             const formArray = new FormArray([], arrayValidators);
@@ -5213,7 +5229,7 @@ class UicFormWrapperComponent {
     }
     mapValidatorsFromField(field) {
         const validators = [];
-        if (field.required)
+        if (field.required && !field.hidden)
             validators.push(Validators.required);
         if (typeof field.min === 'number')
             validators.push(Validators.min(field.min));
@@ -9817,7 +9833,14 @@ const BASE_FORM_FIELDS = [
     {
         name: 'required',
         placeholder: 'form_builder.base.required',
-        type: 'checkbox'
+        type: 'checkbox',
+        visibilityRules: [{ fieldName: 'hidden', operator: 'notEquals', value: true }]
+    },
+    {
+        name: 'hidden',
+        placeholder: 'form_builder.base.hidden',
+        type: 'checkbox',
+        visibilityRules: [{ fieldName: 'required', operator: 'notEquals', value: true }]
     }
 ];
 const LAYOUT_FORM_FIELDS = [
@@ -10380,6 +10403,7 @@ class FieldEditorComponent {
     translateService = inject(UicTranslateService);
     elementRef = inject(ElementRef);
     currentFieldCode = null;
+    basicFormWrapper;
     hasOptions = computed(() => {
         const fieldType = this.fieldType();
         return !!fieldType?.properties.includes('options');
@@ -10411,7 +10435,8 @@ class FieldEditorComponent {
             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');
+        return all.filter(f => (this.enableNameModify() || f.name !== 'name') &&
+            !(f.name === 'hidden' && this.isRepeater()));
     });
     optionsSourceFields = computed(() => this.buildOptionsSourceFields());
     computedSourceFields = computed(() => this.buildComputedSourceFields());
@@ -10420,10 +10445,11 @@ class FieldEditorComponent {
     branchDraftValues = signal({});
     branchFields = computed(() => this.buildBranchFields(this.branchDraftValues()));
     externalValidationFields = computed(() => this.buildExternalValidationFields());
-    initialValues = computed(() => {
-        const fieldData = this.config().fieldData;
-        return fieldData ?? {};
-    });
+    // Solo se refresca cuando se selecciona un field distinto (ver constructor).
+    // No debe seguir cada cambio de config()/fieldData: eso pasa en cada tecla que
+    // el usuario escribe (vía el round-trip fieldChange -> parent -> config), y
+    // forzaría a ui-form-wrapper a reconstruir su FormGroup entero en cada tecla.
+    initialValues = signal({ name: '', type: 'text' });
     branchInitialValues = computed(() => {
         return this.branchDraftValues();
     });
@@ -10443,6 +10469,7 @@ class FieldEditorComponent {
             this.localField.set(field);
             if (this.currentFieldCode !== config.code) {
                 this.currentFieldCode = config.code;
+                this.initialValues.set(field ?? { name: '', type: 'text' });
                 this.editingRuleIndex.set(-1);
                 this.isAddingNewRule.set(false);
                 this.branchDraftValues.set({});
@@ -10614,13 +10641,12 @@ class FieldEditorComponent {
     updateFieldValues(fr) {
         const current = this.localField();
         const hadExternalOptionsSource = !!current.optionsSource?.key;
-        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 (isAutoName && !isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
+        if (!isNameManuallySet && fr['label'] !== undefined && fr['label'] !== current.label) {
             const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
             derivedName = this.normalizeLabelToName(labelStr);
         }
@@ -10635,6 +10661,12 @@ class FieldEditorComponent {
         }
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
+        // El name control vive en el mismo ui-form-wrapper que el label (BASE_FORM_FIELDS).
+        // Lo actualizamos en vivo sin pasar por initialValues (que ya no sigue cada tecla)
+        // para que se siga viendo la derivación mientras el usuario escribe el label.
+        if (derivedName !== undefined) {
+            this.basicFormWrapper?.updateFieldValue('name', derivedName);
+        }
     }
     updateOptions(options) {
         const updatedField = {
@@ -10815,7 +10847,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 }, 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"] }] });
+    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" }, viewQueries: [{ propertyName: "basicFormWrapper", first: true, predicate: ["basicFormWrapper"], descendants: true }], 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        #basicFormWrapper\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,
@@ -10824,8 +10856,11 @@ 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"] }]
-        }], ctorParameters: () => [] });
+                    ], 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        #basicFormWrapper\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: () => [], propDecorators: { basicFormWrapper: [{
+                type: ViewChild,
+                args: ['basicFormWrapper']
+            }] } });
 
 class FieldTypeSelectorComponent {
     excludeTypes = input([]);
@@ -10988,7 +11023,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", 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"] }] });
+    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.hidden) {\r\n                                <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n                            }\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 }}\r\n                                            @if (sf.fieldData.hidden) {\r\n                                                <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n                                            }\r\n                                        </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)}.hidden-field{color:var(--grey-500)}.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,
@@ -10999,7 +11034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DragDropModule,
                         FormsModule,
                         FieldTypeSelectorComponent
-                    ], 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"] }]
+                    ], 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.hidden) {\r\n                                <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n                            }\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 }}\r\n                                            @if (sf.fieldData.hidden) {\r\n                                                <i class=\"hidden-field ri-eye-off-line\" [uiTooltip]=\"'form_builder.base.hidden' | uicTranslate\"></i>\r\n                                            }\r\n                                        </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)}.hidden-field{color:var(--grey-500)}.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"] }]
         }], ctorParameters: () => [], propDecorators: { visibilityParentFieldCodes: [{
                 type: Input
             }] } });
@@ -11070,7 +11105,7 @@ class UicUserFormbuilderComponent {
             'computedSource.dependsOn': fieldOptions,
             'externalValidation.key': this.validationSources
         };
-    });
+    }, { equal: (a, b) => this.areSelectOptionsRecordsEqual(a, b) });
     subFieldDependencyOptions = computed(() => {
         const subCtx = this.editingSubField();
         if (!subCtx)
@@ -11104,7 +11139,7 @@ class UicUserFormbuilderComponent {
             'computedSource.dependsOn': fieldOptions,
             'externalValidation.key': this.validationSources
         };
-    });
+    }, { equal: (a, b) => this.areSelectOptionsRecordsEqual(a, b) });
     constructor() {
         effect(() => {
             const readOnly = this.readOnly();
@@ -11282,8 +11317,88 @@ class UicUserFormbuilderComponent {
         });
     }
     copySchemaToClipboard() {
-        const schema = this.previewSchema();
-        navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
+        const exportPayload = {
+            schemaVersion: 1,
+            form: this.buildExportableForm()
+        };
+        navigator.clipboard.writeText(JSON.stringify(exportPayload, null, 2));
+    }
+    async importSchemaFromFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        if (!file)
+            return;
+        const parsedForm = this.parseImportedSchema(await file.text());
+        if (!parsedForm) {
+            this.tinyAlertService.warning('form_builder.import.invalid_schema', {
+                title: 'form_builder.import.invalid_schema_title'
+            });
+            return;
+        }
+        const hasExistingContent = this.editableBlocks().some(block => block.fields.length > 0);
+        if (hasExistingContent) {
+            const response = await this.tinyAlertService.warning('form_builder.import.confirm_overwrite', {
+                title: 'form_builder.import.confirm_overwrite_title',
+                showCancelButton: true,
+                okButtonText: 'form_builder.import.confirm_overwrite_ok'
+            });
+            if (!response.value)
+                return;
+        }
+        this.applyImportedForm(parsedForm);
+    }
+    buildExportableForm() {
+        return {
+            cols: this.editableCols(),
+            titleFontSize: this.editableTitleFontSize() ?? undefined,
+            subtitleFontSize: this.editableSubtitleFontSize() ?? undefined,
+            titleMargin: this.editableTitleMargin() ?? undefined,
+            subtitleMargin: this.editableSubtitleMargin() ?? undefined,
+            blocks: this.editableBlocks().map(block => ({
+                ...block,
+                fields: block.fields.map(({ field, ...restField }) => ({
+                    ...restField,
+                    repeaterSubFields: restField.repeaterSubFields?.map(({ field: _sf, ...sfRest }) => sfRest)
+                }))
+            }))
+        };
+    }
+    applyImportedForm(form) {
+        this.editableCols.set(form.cols ?? 2);
+        this.editableTitleFontSize.set(form.titleFontSize ?? null);
+        this.editableSubtitleFontSize.set(form.subtitleFontSize ?? null);
+        this.editableTitleMargin.set(form.titleMargin ?? null);
+        this.editableSubtitleMargin.set(form.subtitleMargin ?? null);
+        this.editableBlocks.set(this.prepareBlocksForLocalState(form.blocks ?? []));
+        this.selectedField.set(null);
+        this.editingSubField.set(null);
+        this.focusNewFieldCode.set(null);
+        this.focusNewSubFieldCode.set(null);
+    }
+    parseImportedSchema(raw) {
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+        const candidate = (parsed && typeof parsed === 'object' && 'form' in parsed)
+            ? parsed.form
+            : parsed;
+        return this.isValidEditableForm(candidate) ? candidate : null;
+    }
+    isValidEditableForm(value) {
+        if (!value || typeof value !== 'object')
+            return false;
+        const form = value;
+        if (typeof form.cols !== 'number' || !Array.isArray(form.blocks))
+            return false;
+        return form.blocks.every(block => block && typeof block === 'object' && typeof block.code === 'string' && Array.isArray(block.fields) &&
+            block.fields.every(field => field && typeof field === 'object' && typeof field.code === 'string' &&
+                !!field.fieldData && typeof field.fieldData === 'object' &&
+                typeof field.fieldData.name === 'string' && typeof field.fieldData.type === 'string'));
     }
     submitForm() {
         if (this.enableNameModify()) {
@@ -11554,6 +11669,28 @@ class UicUserFormbuilderComponent {
             externalValidation: cleanExternalValidation
         };
     }
+    areSelectOptionsRecordsEqual(a, b) {
+        const aKeys = Object.keys(a);
+        const bKeys = Object.keys(b);
+        if (aKeys.length !== bKeys.length)
+            return false;
+        return aKeys.every(key => this.areSelectOptionArraysEqual(a[key], b[key]));
+    }
+    areSelectOptionArraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b || a.length !== b.length)
+            return false;
+        return a.every((option, index) => {
+            const other = b[index];
+            const current = option;
+            return !!other &&
+                current.id === other.id &&
+                current.text === other.text &&
+                current.group === other.group &&
+                current.fieldType === other.fieldType;
+        });
+    }
     deepClone(value) {
         if (Array.isArray(value)) {
             return value.map(item => this.deepClone(item));
@@ -11564,7 +11701,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 }, 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"] }] });
+    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            <input #importFileInput id=\"formbuilder-import-file\" aria-label=\"Cargar configuraci\u00F3n del formulario\" type=\"file\" accept=\".json,application/json\" style=\"display:none\" (change)=\"importSchemaFromFile($event)\">\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=\"Cargar JSON de formulario\" (click)=\"importFileInput.click()\"><i class=\"ri-upload-2-line\"></i></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,
@@ -11576,7 +11713,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                            (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"] }]
+                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div class=\"formeditor-header-row1\">\r\n            <input #importFileInput id=\"formbuilder-import-file\" aria-label=\"Cargar configuraci\u00F3n del formulario\" type=\"file\" accept=\".json,application/json\" style=\"display:none\" (change)=\"importSchemaFromFile($event)\">\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=\"Cargar JSON de formulario\" (click)=\"importFileInput.click()\"><i class=\"ri-upload-2-line\"></i></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: [{