ui-core-abv 0.9.6 → 0.9.8

package/fesm2022/ui-core-abv.mjs

@@ -402,6 +402,7 @@ const DICTIONARY_EN = {
         preview_form: 'Preview',
         submit_form: 'Submit',
         preview_form_label: 'This is just a preview',
+        preview_copy_response: 'Validate and copy response',
         select_field_to_edit: 'Select a field to edit its properties',
         no_fields: 'Add fields to your form',
         base: {
@@ -762,6 +763,7 @@ const DICTIONARY_ES = {
         delete_field_dependency_blocked: 'Este campo no se puede eliminar porque otro campo depende de su valor',
         preview_form: 'Vista previa',
         preview_form_label: 'Esta es solo una vista previa',
+        preview_copy_response: 'Validar y copiar respuesta',
         submit_form: 'Guardar',
         select_field_to_edit: 'Selecciona un campo para editar sus propiedades',
         no_fields: 'Añade campos a tu formulario',
@@ -2884,7 +2886,7 @@ class UicSearcherComponent extends base$7 {
                 useExisting: forwardRef(() => UicSearcherComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n              <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n              <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                @if (!disabled) {\r\n                  <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
             type: Component,
@@ -2894,7 +2896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSearcherComponent),
                             multi: true
                         }
-                    ], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n              <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "<ui-input-wrapper\r\n[icon]=\"icon\"\r\n[iconColor]=\"iconColor\"\r\n[label]=\"label\"\r\n[error]=\"error\"\r\n[tip]=\"tip\"\r\n[disabled]=\"disabled\">\r\n@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n              <i class=\"input-internalicon {{internalIcon}} \" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                @if (!disabled) {\r\n                  <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.f-extralight{font-weight:300;color:var(--grey-500)}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.option-group-header{padding:.25rem .5rem 2px;font-size:.75rem;font-weight:600;color:var(--grey-500);text-transform:uppercase;letter-spacing:.05em;pointer-events:none;-webkit-user-select:none;user-select:none}.option-group-header:not(:first-child){border-top:1px solid var(--grey-200);margin-top:.25rem}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-disabled{opacity:.55;cursor:not-allowed}.input-option-disabled:hover{background-color:transparent;cursor:not-allowed}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -5918,6 +5920,10 @@ class UicFormWrapperComponent {
     submit() {
         return this.handleSubmit();
     }
+    /** Valores actuales del formulario, sin importar si son válidos. */
+    getCurrentValues() {
+        return this.toNestedValues(this.form.getRawValue());
+    }
     clean(hardReset = false) {
         if (!this.form)
             return;
@@ -10338,6 +10344,7 @@ class FormPreviewComponent {
     selectOptionsResolver;
     computedFieldResolver;
     externalValidatorResolver;
+    formWrapper;
     constructor(data) {
         this.data = data;
         this.schema = data.schema;
@@ -10345,19 +10352,28 @@ class FormPreviewComponent {
         this.computedFieldResolver = data.computedFieldResolver;
         this.externalValidatorResolver = data.externalValidatorResolver;
     }
-    save(fr) {
-        console.log(fr.form);
+    copyResponseToClipboard() {
+        // Simula un submit para que se disparen las validaciones (required, etc.)
+        // y el usuario pueda probarlas desde el preview.
+        this.formWrapper?.submit();
+        // La respuesta actual se copia igual, sea o no válida: submit() no
+        // devuelve los valores cuando el form es inválido.
+        const values = this.formWrapper?.getCurrentValues() ?? {};
+        navigator.clipboard.writeText(JSON.stringify(values, null, 2));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [externalValidatorResolver]=\"externalValidatorResolver\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "computedFieldResolver", "externalValidatorResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", viewQueries: [{ propertyName: "formWrapper", first: true, predicate: ["formWrapper"], descendants: true }], ngImport: i0, template: "<ui-form-wrapper\n    #formWrapper\n    [schema]=\"schema\"\n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [externalValidatorResolver]=\"externalValidatorResolver\">\n</ui-form-wrapper>\n<div class=\"form-preview-footer\">\n    <ui-button color=\"black\" icon=\"ri-file-copy-line\" [text]=\"'form_builder.preview_copy_response' | uicTranslate\" (click)=\"copyResponseToClipboard()\"></ui-button>\n</div>\n", styles: [".form-preview-footer{display:flex;justify-content:flex-end;margin-top:12px}\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [externalValidatorResolver]=\"externalValidatorResolver\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
+            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent, UicButtonComponent, UicTranslatePipe], template: "<ui-form-wrapper\n    #formWrapper\n    [schema]=\"schema\"\n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [computedFieldResolver]=\"computedFieldResolver\"\n    [externalValidatorResolver]=\"externalValidatorResolver\">\n</ui-form-wrapper>\n<div class=\"form-preview-footer\">\n    <ui-button color=\"black\" icon=\"ri-file-copy-line\" [text]=\"'form_builder.preview_copy_response' | uicTranslate\" (click)=\"copyResponseToClipboard()\"></ui-button>\n</div>\n", styles: [".form-preview-footer{display:flex;justify-content:flex-end;margin-top:12px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
-                }] }] });
+                }] }], propDecorators: { formWrapper: [{
+                type: ViewChild,
+                args: ['formWrapper']
+            }] } });
 
 class UicFieldOptionsEditorComponent {
     optionsChange = new EventEmitter();
@@ -10407,16 +10423,11 @@ class FieldEditorComponent {
     translateService = inject(UicTranslateService);
     elementRef = inject(ElementRef);
     currentFieldCode = null;
-    // Fuente de verdad LOCAL y sincrónica de "¿el usuario ya tocó el name a mano?",
-    // para esta selección de campo. Se fija una sola vez al seleccionar el campo
-    // (ver constructor, a partir de config().nameManuallySet) y luego se actualiza
-    // en el momento mismo en que el usuario edita el name (ver updateFieldValues).
-    // No debe leerse desde config() en cada tecla: config() solo se actualiza tras
-    // un round-trip (fieldChange -> padre -> config), y una tecla puede procesarse
-    // antes de que ese round-trip haya vuelto a bajar, dejando la protección
-    // desactivada justo cuando más se necesita.
-    nameManuallySetForCurrentField = false;
-    basicFormWrapper;
+    // --- Derivación de name a partir de label: DESHABILITADA (ver updateFieldValues) ---
+    // Generaba más problemas de los que resolvía, sobre todo el riesgo de pisar un
+    // name ya establecido. Se deja comentado para una futura reimplementación.
+    // private nameManuallySetForCurrentField = false;
+    // @ViewChild('basicFormWrapper') private readonly basicFormWrapper?: UicFormWrapperComponent;
     hasOptions = computed(() => {
         const fieldType = this.fieldType();
         return !!fieldType?.properties.includes('options');
@@ -10438,7 +10449,8 @@ class FieldEditorComponent {
     editingRuleIndex = signal(-1); // -1 = no se está editando ninguna regla
     isAddingNewRule = signal(false);
     fieldChange = output();
-    nameManuallySet = output();
+    // Derivación de name a partir de label deshabilitada (ver updateFieldValues).
+    // nameManuallySet = output<void>();
     localField = signal({ name: '', type: 'text' });
     /* FORM FIELDS */
     requiredFields = computed(() => {
@@ -10483,7 +10495,7 @@ class FieldEditorComponent {
             if (this.currentFieldCode !== config.code) {
                 this.currentFieldCode = config.code;
                 this.initialValues.set(field ?? { name: '', type: 'text' });
-                this.nameManuallySetForCurrentField = config.nameManuallySet ?? false;
+                // this.nameManuallySetForCurrentField = config.nameManuallySet ?? false; // ver updateFieldValues
                 this.editingRuleIndex.set(-1);
                 this.isAddingNewRule.set(false);
                 this.branchDraftValues.set({});
@@ -10645,34 +10657,43 @@ class FieldEditorComponent {
         };
         this.localField.set(updatedField);
     }
-    normalizeLabelToName(label) {
-        return (label
-            .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-            .toLowerCase()
-            .replace(/[^a-z0-9]+/g, '_')
-            .replace(/^_+|_+$/g, '')) || 'campo';
-    }
+    // --- Derivaci\u00f3n de name a partir de label: DESHABILITADA ---
+    // Generaba m\u00e1s problemas de los que resolv\u00eda, en particular el riesgo de
+    // pisar un name ya establecido. El name queda fijo en el valor autoasignado
+    // al crear el campo (ver addField/addSubField en user-formbuilder.component.ts
+    // y block-editor.component.ts) salvo edici\u00f3n manual directa del campo "name"
+    // (cuando enableNameModify lo habilita). Se deja comentado para una futura
+    // reimplementaci\u00f3n.
+    // private normalizeLabelToName(label: string): string {
+    //   return (
+    //     label
+    //       .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    //       .toLowerCase()
+    //       .replace(/[^a-z0-9]+/g, '_')
+    //       .replace(/^_+|_+$/g, '')
+    //   ) || 'campo';
+    // }
     updateFieldValues(fr) {
         const current = this.localField();
         const hadExternalOptionsSource = !!current.optionsSource?.key;
-        const isPersisted = !!this.config().id;
-        if (!this.nameManuallySetForCurrentField && fr['name'] !== undefined && fr['name'] !== current.name) {
-            this.nameManuallySetForCurrentField = true;
-            this.nameManuallySet.emit();
-        }
-        // El name se deriva del label solo mientras siga siendo el default (nunca
-        // editado a mano) y el campo no esté persistido: un campo ya guardado en
-        // backend (id != 0) mantiene su name fijo aunque siga viéndose como field_N.
-        const canDeriveNameFromLabel = !isPersisted && !this.nameManuallySetForCurrentField;
-        let derivedName;
-        if (canDeriveNameFromLabel && fr['label'] !== undefined && fr['label'] !== current.label) {
-            const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
-            derivedName = this.normalizeLabelToName(labelStr);
-        }
+        // --- Derivación de name a partir de label: DESHABILITADA (ver comentario arriba) ---
+        // const isPersisted = !!this.config().id;
+        // if (!this.nameManuallySetForCurrentField && fr['name'] !== undefined && fr['name'] !== current.name) {
+        //   this.nameManuallySetForCurrentField = true;
+        //   this.nameManuallySet.emit();
+        // }
+        // // El name se deriva del label solo mientras siga siendo el default (nunca
+        // // editado a mano) y el campo no esté persistido: un campo ya guardado en
+        // // backend (id != 0) mantiene su name fijo aunque siga viéndose como field_N.
+        // const canDeriveNameFromLabel = !isPersisted && !this.nameManuallySetForCurrentField;
+        // let derivedName: string | undefined;
+        // if (canDeriveNameFromLabel && fr['label'] !== undefined && fr['label'] !== current.label) {
+        //   const labelStr = typeof fr['label'] === 'string' ? fr['label'] : '';
+        //   derivedName = this.normalizeLabelToName(labelStr);
+        // }
         const updatedField = {
             ...current,
-            ...fr,
-            ...(derivedName !== undefined ? { name: derivedName } : {})
+            ...fr
         };
         const hasExternalOptionsSource = !!updatedField.optionsSource?.key;
         if (!hadExternalOptionsSource && hasExternalOptionsSource && this.hasOptions()) {
@@ -10680,12 +10701,13 @@ 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);
-        }
+        // --- Derivación de name a partir de label: DESHABILITADA (ver comentario arriba) ---
+        // // 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 = {
@@ -10866,7 +10888,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" }, 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"] }] });
+    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" }, 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,
@@ -10876,10 +10898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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        #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']
-            }] } });
+        }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
     excludeTypes = input([]);
@@ -11270,16 +11289,18 @@ class UicUserFormbuilderComponent {
                 this.selectedField.set(parentField);
         }
     }
-    onFieldNameManuallySet() {
-        const selected = this.selectedField();
-        if (!selected)
-            return;
-        this.editableBlocks.update(blocks => blocks.map(block => ({
-            ...block,
-            fields: block.fields.map(f => f.code !== selected.code ? f : { ...f, nameManuallySet: true })
-        })));
-        this.selectedField.update(f => f ? { ...f, nameManuallySet: true } : f);
-    }
+    // Ligado a la derivación de name a partir de label, actualmente deshabilitada
+    // (ver field-editor.component.ts). No hay binding (nameManuallySet) en el
+    // template hacia lib-field-editor, así que este handler no se invoca.
+    // onFieldNameManuallySet(): void {
+    //   const selected = this.selectedField();
+    //   if (!selected) return;
+    //   this.editableBlocks.update(blocks => blocks.map(block => ({
+    //     ...block,
+    //     fields: block.fields.map(f => f.code !== selected.code ? f : { ...f, nameManuallySet: true })
+    //   })));
+    //   this.selectedField.update(f => f ? { ...f, nameManuallySet: true } : f);
+    // }
     onNewSubField(event) {
         this.focusNewSubFieldCode.set(event.subField.code);
     }
@@ -11713,7 +11734,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            <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"] }] });
+    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"] }, { 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,