ui-core-abv 0.6.81 → 0.7.0

package/fesm2022/ui-core-abv.mjs

@@ -3,7 +3,7 @@ import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input, output } from '@angular/core';
 import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, FormBuilder, Validators, ReactiveFormsModule, FormArray } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, map, isObservable, from, Subscription } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
@@ -488,6 +488,13 @@ const DICTIONARY_EN = {
             selectSearchEnabled_tip: 'Enables search among options',
             selectNullable: 'Allow empty option',
             selectSearchEnabled: 'Enable search',
+            repeaterMinItems: 'Minimum items',
+            repeaterMinItems_tip: 'Minimum number of required items',
+            repeaterMaxItems: 'Maximum items',
+            repeaterMaxItems_tip: 'Maximum number of allowed items',
+            repeaterAddLabel: 'Add button label',
+            repeaterRemoveLabel: 'Remove button label',
+            repeaterItemTitle: 'Item title',
         },
         options_editor: {
             title: 'Options',
@@ -513,6 +520,7 @@ const DICTIONARY_EN = {
             delete: 'Delete',
             show_advanced: 'Show advanced',
             hide_advanced: 'Hide advanced',
+            subfields: 'Sub-fields',
         },
         visibility_operators: {
             equals: 'Equals',
@@ -527,6 +535,10 @@ const DICTIONARY_EN = {
         validation: {
             duplicate_identifier: 'The identifier "{{identifier}}" is used more than once.',
             duplicate_identifier_title: 'Validation error',
+        },
+        repeater: {
+            no_subfields: 'No sub-fields yet. Add one below.',
+            add_subfield: 'Add sub-field',
         }
     },
     validation: {
@@ -803,6 +815,13 @@ const DICTIONARY_ES = {
             selectSearchEnabled_tip: 'Habilita búsqueda entre opciones',
             selectNullable: 'Permitir opción vacía',
             selectSearchEnabled: 'Habilitar búsqueda',
+            repeaterMinItems: 'Mínimo de ítems',
+            repeaterMinItems_tip: 'Cantidad mínima de ítems requerida',
+            repeaterMaxItems: 'Máximo de ítems',
+            repeaterMaxItems_tip: 'Cantidad máxima de ítems permitida',
+            repeaterAddLabel: 'Etiqueta del botón agregar',
+            repeaterRemoveLabel: 'Etiqueta del botón eliminar',
+            repeaterItemTitle: 'Título de ítem',
         },
         options_editor: {
             title: 'Opciones',
@@ -828,6 +847,7 @@ const DICTIONARY_ES = {
             delete: 'Eliminar',
             show_advanced: 'Mostrar avanzado',
             hide_advanced: 'Ocultar avanzado',
+            subfields: 'Sub-campos',
         },
         visibility_operators: {
             equals: 'Es igual a',
@@ -842,6 +862,10 @@ const DICTIONARY_ES = {
         validation: {
             duplicate_identifier: 'El identificador "{{identifier}}" se está usando más de una vez.',
             duplicate_identifier_title: 'Error de validación',
+        },
+        repeater: {
+            no_subfields: 'Sin sub-campos. Añade uno abajo.',
+            add_subfield: 'Agregar sub-campo',
         }
     },
     validation: {
@@ -3872,6 +3896,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class UicRepeaterComponent {
+    fb = inject(FormBuilder);
+    formArray;
+    field;
+    cols = 2;
+    error;
+    ngOnInit() {
+        if (this.formArray.length === 0) {
+            const min = this.field.repeaterMinItems ?? 0;
+            for (let i = 0; i < min; i++) {
+                this.addGroup();
+            }
+        }
+    }
+    getGroup(index) {
+        return this.formArray.at(index);
+    }
+    addGroup() {
+        if (this.field.repeaterMaxItems && this.formArray.length >= this.field.repeaterMaxItems) {
+            return;
+        }
+        const group = this.fb.group({});
+        (this.field.repeaterFields || []).forEach(subField => {
+            const validators = this.mapValidatorsFromField(subField);
+            const controlState = {
+                value: this.getBlankValue(subField),
+                disabled: !!subField.disabled
+            };
+            group.addControl(subField.name, this.fb.control(controlState, validators));
+        });
+        this.formArray.push(group);
+    }
+    removeGroup(index) {
+        if (this.field.repeaterMinItems && this.formArray.length <= this.field.repeaterMinItems) {
+            return;
+        }
+        this.formArray.removeAt(index);
+    }
+    get canAdd() {
+        if (!this.field.repeaterMaxItems)
+            return true;
+        return this.formArray.length < this.field.repeaterMaxItems;
+    }
+    get canRemove() {
+        if (this.field.repeaterMinItems !== undefined && this.field.repeaterMinItems !== null) {
+            return this.formArray.length > this.field.repeaterMinItems;
+        }
+        return true;
+    }
+    mapValidatorsFromField(field) {
+        const validators = [];
+        if (field.required)
+            validators.push(Validators.required);
+        if (typeof field.min === 'number')
+            validators.push(Validators.min(field.min));
+        if (typeof field.max === 'number')
+            validators.push(Validators.max(field.max));
+        if (typeof field.maxLength === 'number')
+            validators.push(Validators.maxLength(field.maxLength));
+        if (typeof field.minLength === 'number')
+            validators.push(Validators.minLength(field.minLength));
+        if (field.pattern instanceof RegExp)
+            validators.push(Validators.pattern(field.pattern));
+        return validators;
+    }
+    getBlankValue(field) {
+        switch (field.type) {
+            case 'text':
+            case 'textarea':
+            case 'phone':
+                return '';
+            case 'checkbox':
+            case 'switch':
+                return false;
+            case 'multyselect':
+                return [];
+            case 'slider':
+                return field.min ?? 0;
+            default:
+                return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRepeaterComponent, isStandalone: true, selector: "ui-repeater", inputs: { formArray: "formArray", field: "field", cols: "cols", error: "error" }, ngImport: i0, template: "<div class=\"repeater-label\"> {{field.label}} </div>\r\n<div class=\"uic-repeater\" [class.disabled]=\"formArray.disabled\">\r\n  @for (group of formArray.controls; track $index) {\r\n    <div class=\"uic-repeater-item\">\r\n      <div class=\"uic-repeater-item-header\">\r\n        <h4 class=\"uic-repeater-item-title\">\r\n          {{ field.repeaterItemTitle || field.label || 'Item' }} {{ $index + 1 }}\r\n        </h4>\r\n        @if (canRemove && !formArray.disabled) {\r\n          <ui-button \r\n            [icon]=\"'ri-delete-bin-line'\" \r\n            [type]=\"'bordered'\" \r\n            [color]=\"'red'\" \r\n            size=\"s\" \r\n            (click)=\"removeGroup($index)\"\r\n            [text]=\"field.repeaterRemoveLabel || 'Eliminar'\">\r\n          </ui-button>\r\n        }\r\n      </div>\r\n      <div class=\"uic-repeater-item-body\">\r\n        <ui-dynamic-form \r\n          [form]=\"getGroup($index)\" \r\n          [fields]=\"field.repeaterFields || []\" \r\n          [disabled]=\"formArray.disabled\"\r\n          [cols]=\"cols\"\r\n          [isSubForm]=\"true\">\r\n        </ui-dynamic-form>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  @if (canAdd && !formArray.disabled) {\r\n    <div class=\"uic-repeater-add-action\">\r\n      <ui-button \r\n        [icon]=\"'ri-add-line'\" \r\n        [type]=\"'bordered'\" \r\n        [color]=\"'primary'\" \r\n        (click)=\"addGroup()\"\r\n        [text]=\"field.repeaterAddLabel || 'A\u00F1adir'\">\r\n      </ui-button>\r\n    </div>\r\n  }\r\n  @if (error) {\r\n    <p class=\"uic-repeater-error\">{{ error }}</p>\r\n  }\r\n</div>\r\n", styles: [".uic-repeater{display:flex;flex-direction:column;gap:16px;width:100%}.uic-repeater.disabled{opacity:.7;pointer-events:none}.uic-repeater .uic-repeater-item{border:1px solid var(--primary-400, #e0e0e0);border-radius:8px;padding:16px;background-color:var(--uic-bg-color, #fff)}.uic-repeater .uic-repeater-item .uic-repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--uic-border-color, #e0e0e0)}.uic-repeater .uic-repeater-item .uic-repeater-item-header .uic-repeater-item-title{margin:0;font-size:14px;font-weight:600;color:var(--uic-text-color, #333)}.uic-repeater .uic-repeater-item .uic-repeater-item-body{width:100%}.uic-repeater .uic-repeater-add-action{margin-top:8px}.uic-repeater .uic-repeater-error{margin:4px 0 0;font-size:12px;color:var(--uic-red, #e53935)}.repeater-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)}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "component", type: i0.forwardRef(() => UicButtonComponent), selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: i0.forwardRef(() => UicDynamicFormComponent), selector: "ui-dynamic-form", inputs: ["fields", "isSubForm", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn", "selectOptionsResolver"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRepeaterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-repeater', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        UicButtonComponent,
+                        forwardRef(() => UicDynamicFormComponent)
+                    ], template: "<div class=\"repeater-label\"> {{field.label}} </div>\r\n<div class=\"uic-repeater\" [class.disabled]=\"formArray.disabled\">\r\n  @for (group of formArray.controls; track $index) {\r\n    <div class=\"uic-repeater-item\">\r\n      <div class=\"uic-repeater-item-header\">\r\n        <h4 class=\"uic-repeater-item-title\">\r\n          {{ field.repeaterItemTitle || field.label || 'Item' }} {{ $index + 1 }}\r\n        </h4>\r\n        @if (canRemove && !formArray.disabled) {\r\n          <ui-button \r\n            [icon]=\"'ri-delete-bin-line'\" \r\n            [type]=\"'bordered'\" \r\n            [color]=\"'red'\" \r\n            size=\"s\" \r\n            (click)=\"removeGroup($index)\"\r\n            [text]=\"field.repeaterRemoveLabel || 'Eliminar'\">\r\n          </ui-button>\r\n        }\r\n      </div>\r\n      <div class=\"uic-repeater-item-body\">\r\n        <ui-dynamic-form \r\n          [form]=\"getGroup($index)\" \r\n          [fields]=\"field.repeaterFields || []\" \r\n          [disabled]=\"formArray.disabled\"\r\n          [cols]=\"cols\"\r\n          [isSubForm]=\"true\">\r\n        </ui-dynamic-form>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  @if (canAdd && !formArray.disabled) {\r\n    <div class=\"uic-repeater-add-action\">\r\n      <ui-button \r\n        [icon]=\"'ri-add-line'\" \r\n        [type]=\"'bordered'\" \r\n        [color]=\"'primary'\" \r\n        (click)=\"addGroup()\"\r\n        [text]=\"field.repeaterAddLabel || 'A\u00F1adir'\">\r\n      </ui-button>\r\n    </div>\r\n  }\r\n  @if (error) {\r\n    <p class=\"uic-repeater-error\">{{ error }}</p>\r\n  }\r\n</div>\r\n", styles: [".uic-repeater{display:flex;flex-direction:column;gap:16px;width:100%}.uic-repeater.disabled{opacity:.7;pointer-events:none}.uic-repeater .uic-repeater-item{border:1px solid var(--primary-400, #e0e0e0);border-radius:8px;padding:16px;background-color:var(--uic-bg-color, #fff)}.uic-repeater .uic-repeater-item .uic-repeater-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px dashed var(--uic-border-color, #e0e0e0)}.uic-repeater .uic-repeater-item .uic-repeater-item-header .uic-repeater-item-title{margin:0;font-size:14px;font-weight:600;color:var(--uic-text-color, #333)}.uic-repeater .uic-repeater-item .uic-repeater-item-body{width:100%}.uic-repeater .uic-repeater-add-action{margin-top:8px}.uic-repeater .uic-repeater-error{margin:4px 0 0;font-size:12px;color:var(--uic-red, #e53935)}.repeater-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)}\n"] }]
+        }], propDecorators: { formArray: [{
+                type: Input,
+                args: [{ required: true }]
+            }], field: [{
+                type: Input,
+                args: [{ required: true }]
+            }], cols: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
 class UicDynamicFormComponent {
     ngZone;
     fieldsSignal = signal([]);
@@ -3893,9 +4022,9 @@ class UicDynamicFormComponent {
     get fields() {
         return this.fieldsSignal();
     }
+    isSubForm = false;
     set form(value) {
         this.formSignal.set(value);
-        this.formState.setForm(value);
     }
     get form() {
         return this.formSignal();
@@ -3930,6 +4059,12 @@ class UicDynamicFormComponent {
             return field.visibilityRules.every(rule => this.matchesVisibilityRule(rule));
         });
     });
+    formSyncEffect = effect(() => {
+        const form = this.formSignal();
+        if (form && !this.isSubForm) {
+            this.formState.setForm(form);
+        }
+    });
     fieldStateSyncEffect = effect(() => {
         this.visibleFieldStates();
         this.syncFieldEnabledState();
@@ -3989,7 +4124,14 @@ class UicDynamicFormComponent {
             const isVisible = visibleNames.has(field.name);
             const wasVisible = this.fieldVisibilityState.get(field.name);
             if (!isVisible && wasVisible) {
-                control.setValue(this.getClearValue(field.type), { emitEvent: false });
+                if (field.type === 'repeater') {
+                    const arr = control;
+                    while (arr.length > 0)
+                        arr.removeAt(0, { emitEvent: false });
+                }
+                else {
+                    control.setValue(this.getClearValue(field.type), { emitEvent: false });
+                }
                 control.markAsPristine();
                 control.markAsUntouched();
             }
@@ -4012,7 +4154,7 @@ class UicDynamicFormComponent {
         if (fieldType === 'checkbox' || fieldType === 'switch') {
             return false;
         }
-        if (fieldType === 'multyselect') {
+        if (fieldType === 'multyselect' || fieldType === 'repeater') {
             return [];
         }
         return null;
@@ -4167,6 +4309,9 @@ class UicDynamicFormComponent {
                 });
         });
     }
+    asFormArray(control) {
+        return control;
+    }
     isListening(fieldName) {
         return this.listeningField === fieldName;
     }
@@ -4188,7 +4333,8 @@ class UicDynamicFormComponent {
             field: field.label ?? field.name,
             requiredLength: err.requiredLength,
         }),
-        pattern: (_err, field) => this.i18n.translate('validation.pattern', { field: field.label ?? field.name })
+        pattern: (_err, field) => this.i18n.translate('validation.pattern', { field: field.label ?? field.name }),
+        minLengthArray: (_err, field) => this.i18n.translate('validation.required', { field: field.label ?? field.name })
     };
     getInputColor(field, value) {
         const scale = field.internalColorScale;
@@ -4449,7 +4595,7 @@ class UicDynamicFormComponent {
         recognition.start();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\">\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [fileTypes]=\"field.fileTypes??null\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [formControlName]=\"field.name\"\n        ></ui-file-input>\n      }\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", isSubForm: "isSubForm", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols", fileUidResolverFn: "fileUidResolverFn", selectOptionsResolver: "selectOptionsResolver" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "allSelectedText", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes", "fileUidResolverFn"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicRepeaterComponent, selector: "ui-repeater", inputs: ["formArray", "field", "cols", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -4472,10 +4618,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicInputComponent,
                         UicCheckboxComponent,
                         UicPhoneInputComponent,
-                        FormsModule
-                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\">\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [fileTypes]=\"field.fileTypes??null\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [formControlName]=\"field.name\"\n        ></ui-file-input>\n      }\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
+                        FormsModule,
+                        UicRepeaterComponent
+                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div [style.grid-column]=\"getGridColumn(field)\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [nullable]=\"field.selectNullable??false\"\r\n          [searcherEnabled]=\"field.selectSearchEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [fileUidResolverFn]=\"fileUidResolverFn\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n      @else if (field.type === 'repeater') {\r\n        <ui-repeater\r\n          [formArray]=\"asFormArray(control)\"\r\n          [field]=\"field\"\r\n          [cols]=\"cols\"\r\n          [error]=\"error\"\r\n        ></ui-repeater>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),minmax(0,1fr))}}.form>*{min-width:0}h2{margin-top:1.5rem}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}textarea{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
+            }], isSubForm: [{
+                type: Input
             }], form: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4563,10 +4712,12 @@ class UicFormWrapperComponent {
     buildForm() {
         this.formValueSub?.unsubscribe();
         this.formValueSub = null;
-        const fields = this.collectAllFields();
-        const numericFields = fields.filter(field => field.type === 'number');
+        const allFields = this.collectAllFields();
+        const regularFields = allFields.filter(field => field.type !== 'repeater');
+        const repeaterFields = allFields.filter(field => field.type === 'repeater');
+        const numericFields = regularFields.filter(field => field.type === 'number');
         const newForm = this.fb.group({});
-        fields.forEach(field => {
+        regularFields.forEach(field => {
             const validators = this.mapValidatorsFromField(field);
             const initial = this.normalizeFieldValue(field, this.newFieldInitialValue(field, true));
             const controlState = {
@@ -4575,6 +4726,25 @@ class UicFormWrapperComponent {
             };
             newForm.addControl(field.name, this.fb.control(controlState, validators));
         });
+        repeaterFields.forEach(field => {
+            const arrayValidators = field.required
+                ? [this.repeaterArrayValidator(field.repeaterMinItems ?? 1)]
+                : [];
+            const formArray = new FormArray([], arrayValidators);
+            const initialItems = this.initialValues?.[field.name];
+            if (Array.isArray(initialItems) && initialItems.length > 0) {
+                initialItems.forEach(itemValues => {
+                    formArray.push(this.buildRepeaterGroup(field, itemValues), { emitEvent: false });
+                });
+            }
+            else {
+                const min = field.repeaterMinItems ?? 0;
+                for (let i = 0; i < min; i++) {
+                    formArray.push(this.buildRepeaterGroup(field, {}), { emitEvent: false });
+                }
+            }
+            newForm.addControl(field.name, formArray);
+        });
         this.formValueSub = newForm.valueChanges.subscribe(() => {
             this.normalizeNumericControls(newForm, numericFields);
             this.handleFormChange();
@@ -4585,6 +4755,21 @@ class UicFormWrapperComponent {
         this.updateDisabledState();
         this.focusConfiguredField();
     }
+    buildRepeaterGroup(field, values = {}) {
+        const group = this.fb.group({});
+        (field.repeaterFields ?? []).forEach(subField => {
+            const validators = this.mapValidatorsFromField(subField);
+            const value = values[subField.name] ?? this.blankValue(subField);
+            group.addControl(subField.name, this.fb.control({ value, disabled: this.disabled || !!subField.disabled }, validators));
+        });
+        return group;
+    }
+    repeaterArrayValidator(min) {
+        return (control) => {
+            const arr = control;
+            return arr.length >= min ? null : { minLengthArray: { required: min, actual: arr.length } };
+        };
+    }
     focusConfiguredField() {
         if (!this.focusFieldName || this.hasFocusedCurrentTrigger)
             return;
@@ -4627,6 +4812,20 @@ class UicFormWrapperComponent {
         }
         for (const block of this.effectiveSchema.blocks) {
             block.fields = this.updateFieldOptions(block);
+            block.fields = block.fields.map(field => {
+                if (field.type !== 'repeater' || !field.repeaterFields?.length)
+                    return field;
+                const namespace = this.externalData[field.name];
+                if (!namespace || typeof namespace !== 'object' || Array.isArray(namespace))
+                    return field;
+                const updatedRepeaterFields = field.repeaterFields.map(subField => {
+                    if (subField.type !== 'select' && subField.type !== 'pool' && subField.type !== 'multyselect')
+                        return subField;
+                    const subOptions = namespace[subField.name];
+                    return Array.isArray(subOptions) ? { ...subField, options: subOptions } : subField;
+                });
+                return { ...field, repeaterFields: updatedRepeaterFields };
+            });
         }
     }
     mapValidatorsFromField(field) {
@@ -4674,6 +4873,16 @@ class UicFormWrapperComponent {
     updateOptionsSources(force = false) {
         const fields = this.collectAllFields().filter(field => this.hasUsableOptionsSource(field));
         const fieldNames = new Set(fields.map(field => field.name));
+        for (const block of this.effectiveSchema?.blocks ?? []) {
+            for (const f of block.fields) {
+                if (f.type === 'repeater' && f.repeaterFields?.length) {
+                    f.repeaterFields.forEach(sf => {
+                        if (this.hasUsableOptionsSource(sf))
+                            fieldNames.add(`${f.name}__${sf.name}`);
+                    });
+                }
+            }
+        }
         for (const fieldName of this.optionSourceSubs.keys()) {
             if (!fieldNames.has(fieldName)) {
                 this.optionSourceSubs.get(fieldName)?.unsubscribe();
@@ -4682,6 +4891,80 @@ class UicFormWrapperComponent {
             }
         }
         fields.forEach(field => this.resolveOptionsSourceField(field, force));
+        this.updateRepeaterSubFieldOptionsSources(force);
+    }
+    updateRepeaterSubFieldOptionsSources(force = false) {
+        if (!this.effectiveSchema?.blocks?.length)
+            return;
+        for (const block of this.effectiveSchema.blocks) {
+            for (const field of block.fields) {
+                if (field.type !== 'repeater' || !field.repeaterFields?.length)
+                    continue;
+                field.repeaterFields.forEach(subField => {
+                    if (this.hasUsableOptionsSource(subField)) {
+                        this.resolveRepeaterSubFieldOptionsSource(field, subField, force);
+                    }
+                });
+            }
+        }
+    }
+    resolveRepeaterSubFieldOptionsSource(parentField, subField, force = false) {
+        const source = subField.optionsSource;
+        const subFieldKey = `${parentField.name}__${subField.name}`;
+        if (!this.selectOptionsResolver) {
+            this.updateRepeaterSubFieldOptionsState(parentField.name, subField.name, {
+                options: subField.options ?? [],
+                loading: false
+            });
+            return;
+        }
+        if (!force && this.optionSourceSubs.has(subFieldKey))
+            return;
+        this.optionSourceSubs.get(subFieldKey)?.unsubscribe();
+        this.updateRepeaterSubFieldOptionsState(parentField.name, subField.name, { loading: true });
+        const values = this.toNestedValues(this.form?.getRawValue?.() ?? {});
+        let optionsResult;
+        try {
+            optionsResult = this.selectOptionsResolver(source, { field: subField, values, dependencyValue: undefined });
+        }
+        catch (error) {
+            this.handleOptionsSourceError(subField, source, error);
+            return;
+        }
+        const sub = this.toObservable(optionsResult).subscribe({
+            next: items => {
+                const options = this.mapOptionsSourceItems(items, source);
+                this.updateRepeaterSubFieldOptionsState(parentField.name, subField.name, { options, loading: false });
+            },
+            error: (error) => this.handleOptionsSourceError(subField, source, error),
+            complete: () => this.updateRepeaterSubFieldOptionsState(parentField.name, subField.name, { loading: false })
+        });
+        this.optionSourceSubs.set(subFieldKey, sub);
+    }
+    updateRepeaterSubFieldOptionsState(repeaterFieldName, subFieldName, values) {
+        if (!this.effectiveSchema?.blocks?.length)
+            return;
+        for (const block of this.effectiveSchema.blocks) {
+            const repeaterIdx = block.fields.findIndex(f => f.name === repeaterFieldName);
+            if (repeaterIdx === -1)
+                continue;
+            const repeaterField = block.fields[repeaterIdx];
+            if (!repeaterField.repeaterFields)
+                continue;
+            const subIdx = repeaterField.repeaterFields.findIndex(sf => sf.name === subFieldName);
+            if (subIdx === -1)
+                continue;
+            const updatedRepeaterFields = [...repeaterField.repeaterFields];
+            updatedRepeaterFields[subIdx] = {
+                ...updatedRepeaterFields[subIdx],
+                ...(values.options !== undefined ? { options: values.options } : {}),
+                ...(values.loading !== undefined ? { loading: values.loading } : {})
+            };
+            block.fields[repeaterIdx] = { ...repeaterField, repeaterFields: updatedRepeaterFields };
+            block.fields = [...block.fields];
+            this.effectiveSchema.blocks = [...this.effectiveSchema.blocks];
+            return;
+        }
     }
     updateDependentOptionsSources() {
         const fields = this.collectAllFields().filter(field => {
@@ -4925,12 +5208,28 @@ class UicFormWrapperComponent {
             return;
         const fields = this.collectAllFields();
         const fieldMap = new Map(fields.map(field => [field.name, field]));
-        const resetValues = {};
         Object.keys(this.form.controls).forEach(name => {
             const field = fieldMap.get(name);
-            resetValues[name] = this.resolveResetValue(name, field, hardReset);
+            const control = this.form.get([name]);
+            if (!control)
+                return;
+            if (field?.type === 'repeater') {
+                const formArray = control;
+                while (formArray.length > 0) {
+                    formArray.removeAt(0, { emitEvent: false });
+                }
+                const min = field.repeaterMinItems ?? 0;
+                for (let i = 0; i < min; i++) {
+                    formArray.push(this.buildRepeaterGroup(field, {}), { emitEvent: false });
+                }
+                formArray.markAsPristine();
+                formArray.markAsUntouched();
+            }
+            else {
+                const resetValue = this.resolveResetValue(name, field, hardReset);
+                control.reset(resetValue, { emitEvent: false });
+            }
         });
-        this.form.reset(resetValues, { emitEvent: false });
         this.handleFormChange();
     }
     addFieldControl(field, after) {
@@ -5121,7 +5420,7 @@ class UicFormWrapperComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", selectOptionsResolver: "selectOptionsResolver", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues", focusFieldName: "focusFieldName", focusFieldTrigger: "focusFieldTrigger", fileUidResolverFn: "fileUidResolverFn" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", optionsSourceError: "optionsSourceError" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\n          [cols]=\"effectiveSchema.cols\"\n          [disabled]=\"disabled\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [fields]=\"block.fields\"\n          [form]=\"form\"\n          [selectOptionsResolver]=\"selectOptionsResolver\">\n        </ui-dynamic-form>\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn", "selectOptionsResolver"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", selectOptionsResolver: "selectOptionsResolver", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues", focusFieldName: "focusFieldName", focusFieldTrigger: "focusFieldTrigger", fileUidResolverFn: "fileUidResolverFn" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", optionsSourceError: "optionsSourceError" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\n          [cols]=\"effectiveSchema.cols\"\n          [disabled]=\"disabled\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [fields]=\"block.fields\"\n          [form]=\"form\"\n          [selectOptionsResolver]=\"selectOptionsResolver\">\n        </ui-dynamic-form>\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "isSubForm", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn", "selectOptionsResolver"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
@@ -6499,7 +6798,10 @@ function mapEditableBlocksToBlocks(blocks, editable) {
                 ...field.fieldData,
                 disabled: !editable,
                 optionsSource,
-                visibilityRules: visibilityRules ?? field.fieldData.visibilityRules
+                visibilityRules: visibilityRules ?? field.fieldData.visibilityRules,
+                ...(field.repeaterSubFields?.length
+                    ? { repeaterFields: field.repeaterSubFields.map(sf => ({ ...sf.fieldData, disabled: !editable })) }
+                    : {})
             };
         })
     }));
@@ -8588,7 +8890,8 @@ const FIELDS_CONFIG = [
     { value: 'pool', icon: 'ri-bubble-chart-line', detail: 'Seleccion con lista y detalle por item', label: 'Pool de opciones', properties: ['options', 'multyEnabled', 'poolEnabledListView', 'poolTitle'], visibility: { outputType: 'selectedDetailed[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'file', icon: 'ri-attachment-line', detail: 'Carga de archivos', label: 'Archivo', properties: ['multyEnabled', 'fileTypes', 'iaValidation', 'iaValidationPrompt'], visibility: { outputType: 'UicFileInputValue[]', operators: ['isEmpty', 'isNotEmpty'] } },
     { value: 'searcher', icon: 'ri-seo-line', detail: 'Buscador con fuente de datos externa', label: 'Buscador', properties: ['placeholder', 'optionsSource.key', 'optionsSource.idField', 'optionsSource.textField', 'optionsSource.textTemplate', 'optionsSource.dependsOn', 'optionsSource.paramName'], visibility: { outputType: 'object', operators: ['isEmpty', 'isNotEmpty'] } },
-    { value: 'slider', icon: 'ri-equalizer-2-line', detail: 'Control deslizante continuo', label: 'Deslizador', properties: ['min', 'max', 'sliderInterval', 'sliderMarks'], visibility: { outputType: 'number', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } }
+    { value: 'slider', icon: 'ri-equalizer-2-line', detail: 'Control deslizante continuo', label: 'Deslizador', properties: ['min', 'max', 'sliderInterval', 'sliderMarks'], visibility: { outputType: 'number', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'repeater', icon: 'ri-stack-line', detail: 'Grupo de campos repetibles', label: 'Repetidor', properties: ['repeaterMinItems', 'repeaterMaxItems', 'repeaterAddLabel', 'repeaterRemoveLabel', 'repeaterItemTitle'], visibility: { outputType: 'object[]', operators: ['isEmpty', 'isNotEmpty'] } }
 ];
 const BASE_FORM_FIELDS = [
     {
@@ -9028,6 +9331,42 @@ const EXTRA_FORM_FIELDS = [
         internalIcon: 'ri-folder-add-line',
         tip: 'form_builder.extra.multyEnabled_tip',
         type: 'checkbox'
+    },
+    {
+        name: 'repeaterMinItems',
+        label: 'form_builder.extra.repeaterMinItems',
+        internalIcon: 'ri-skip-down-line',
+        tip: 'form_builder.extra.repeaterMinItems_tip',
+        type: 'number',
+        step: 1,
+        min: 0
+    },
+    {
+        name: 'repeaterMaxItems',
+        label: 'form_builder.extra.repeaterMaxItems',
+        internalIcon: 'ri-skip-up-line',
+        tip: 'form_builder.extra.repeaterMaxItems_tip',
+        type: 'number',
+        step: 1,
+        min: 1
+    },
+    {
+        name: 'repeaterAddLabel',
+        label: 'form_builder.extra.repeaterAddLabel',
+        internalIcon: 'ri-add-circle-line',
+        type: 'text'
+    },
+    {
+        name: 'repeaterRemoveLabel',
+        label: 'form_builder.extra.repeaterRemoveLabel',
+        internalIcon: 'ri-delete-bin-line',
+        type: 'text'
+    },
+    {
+        name: 'repeaterItemTitle',
+        label: 'form_builder.extra.repeaterItemTitle',
+        internalIcon: 'ri-price-tag-2-line',
+        type: 'text'
     }
 ];
 const BRANCH_FORM_FIELDS = [
@@ -9136,8 +9475,10 @@ class FieldEditorComponent {
         return !!fieldType && (fieldType.value === 'searcher' || fieldType.properties.includes('options'));
     });
     hasExternalOptionsSource = computed(() => !!this.localField().optionsSource?.key);
+    isRepeater = computed(() => this.fieldType()?.value === 'repeater');
     config = input.required();
     focusRequiredField = input(false);
+    isSubField = input(false);
     options = input({});
     hiddenSections = signal([]);
     fieldChange = output();
@@ -9416,7 +9757,7 @@ class FieldEditorComponent {
         return operator === 'isEmpty' || operator === 'isNotEmpty';
     }
     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 }, 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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptionsSourceConfig()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (hasOptions() && !hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields()\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\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)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, isSubField: { classPropertyName: "isSubField", publicName: "isSubField", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptionsSourceConfig()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"optionsSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n        @if (hasOptions() && !hasExternalOptionsSource()) {\r\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n        }\r\n    }\r\n</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()) {\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            <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            <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "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,
@@ -9425,21 +9766,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptionsSourceConfig()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (hasOptions() && !hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\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>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields()\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\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)}\n"] }]
+                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\r\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptionsSourceConfig()) {\r\n        <ui-form-wrapper\r\n            [fields]=\"optionsSourceFields()\"\r\n            [initialValues]=\"initialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\"\r\n            (formChange)=\"updateFieldValues($event)\">\r\n        </ui-form-wrapper>\r\n        @if (hasOptions() && !hasExternalOptionsSource()) {\r\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n        }\r\n    }\r\n</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()) {\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            <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            <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\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)}\n"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
-    types = [...FIELDS_CONFIG];
+    excludeTypes = input([]);
+    types = computed(() => FIELDS_CONFIG.filter(f => !this.excludeTypes().includes(f.value)));
     selectType = output();
     addField(type) {
         this.selectType.emit(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldTypeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldTypeSelectorComponent, isStandalone: true, selector: "lib-field-type-selector", outputs: { selectType: "selectType" }, ngImport: i0, template: "@for (type of types; track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldTypeSelectorComponent, isStandalone: true, selector: "lib-field-type-selector", inputs: { excludeTypes: { classPropertyName: "excludeTypes", publicName: "excludeTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectType: "selectType" }, ngImport: i0, template: "@for (type of types(); track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\r\n        <i [class]=\"type.icon\"></i>\r\n    </div>\r\n}\r\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldTypeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-field-type-selector', imports: [UicToolTipDirective, UicTranslatePipe], template: "@for (type of types; track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"] }]
+            args: [{ selector: 'lib-field-type-selector', imports: [UicToolTipDirective, UicTranslatePipe], template: "@for (type of types(); track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\r\n        <i [class]=\"type.icon\"></i>\r\n    </div>\r\n}\r\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"] }]
         }] });
 
 class BlockEditorComponent {
@@ -9454,10 +9796,81 @@ class BlockEditorComponent {
     addFieldRequest = output();
     deleteBlock = output();
     notifySelectedField = output();
+    notifySelectedSubField = output();
     selectedFieldId = null;
+    selectedSubFieldCode = null;
     visibilityParentFieldCodes = new Set();
+    excludeSubFieldTypes = ['repeater'];
+    expandedRepeaters = signal(new Set());
+    isRepeaterExpanded(code) {
+        return this.expandedRepeaters().has(code);
+    }
+    toggleRepeater(code, event) {
+        event.stopPropagation();
+        const next = new Set(this.expandedRepeaters());
+        next.has(code) ? next.delete(code) : next.add(code);
+        this.expandedRepeaters.set(next);
+    }
+    isRepeaterParentSelected(field) {
+        if (this.selectedFieldId === field.code)
+            return true;
+        if (field.fieldData.type !== 'repeater')
+            return false;
+        return !!(this.selectedSubFieldCode && field.repeaterSubFields?.some(sf => sf.code === this.selectedSubFieldCode));
+    }
     selectField(field) {
         this.notifySelectedField.emit(field);
+        this.notifySelectedSubField.emit(null);
+    }
+    onSelectSubField(parentCode, subField, event) {
+        event.stopPropagation();
+        this.notifySelectedSubField.emit({ parentCode, subField });
+    }
+    addSubField(parentCode, type) {
+        const parentField = this.block().fields.find(f => f.code === parentCode);
+        const existing = parentField?.repeaterSubFields ?? [];
+        const sfCode = this.generateSubFieldCode(existing);
+        const newSf = {
+            code: sfCode,
+            order: existing.length + 1,
+            type: type.value,
+            field: type,
+            fieldData: { name: sfCode, label: 'Nuevo campo', type: type.value }
+        };
+        this.updateSubFields(parentCode, [...existing, newSf]);
+        this.notifySelectedSubField.emit({ parentCode, subField: newSf });
+    }
+    deleteSubField(parentCode, sfCode, event) {
+        event.stopPropagation();
+        const parentField = this.block().fields.find(f => f.code === parentCode);
+        const updated = (parentField?.repeaterSubFields ?? []).filter(sf => sf.code !== sfCode);
+        this.updateSubFields(parentCode, updated);
+        if (this.selectedSubFieldCode === sfCode) {
+            this.notifySelectedSubField.emit(null);
+        }
+    }
+    reorderSubFields(parentCode, event) {
+        if (event.previousIndex === event.currentIndex)
+            return;
+        const parentField = this.block().fields.find(f => f.code === parentCode);
+        const next = [...(parentField?.repeaterSubFields ?? [])];
+        moveItemInArray(next, event.previousIndex, event.currentIndex);
+        this.updateSubFields(parentCode, next);
+    }
+    updateSubFields(parentCode, subFields) {
+        this.blockChange.emit({
+            ...this.block(),
+            fields: this.block().fields.map(f => f.code !== parentCode ? f : { ...f, repeaterSubFields: subFields })
+        });
+    }
+    generateSubFieldCode(existing) {
+        const max = existing.reduce((m, sf) => {
+            if (!sf.code.startsWith('sf_'))
+                return m;
+            const n = parseInt(sf.code.slice(3), 10);
+            return isNaN(n) ? m : Math.max(m, n);
+        }, 0);
+        return `sf_${max + 1}`;
     }
     changeTitle(newTitle) {
         this.blockChange.emit({ ...this.block(), title: newTitle });
@@ -9497,7 +9910,7 @@ class BlockEditorComponent {
         this.blockChange.emit({ ...this.block(), fields: nextFields });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: false, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\n            [disabled]=\"isBlockVisibilityParent()\"\n            (click)=\"requestDeleteBlock($event)\"\n            size=\"s\"\n            icon=\"ri-delete-bin-line\"\n            color=\"red\"\n            type=\"ghost\"\n            [iconOnly]=\"true\">\n        </ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button\n                        [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\n                        [disabled]=\"isVisibilityParent(edtField.code)\"\n                        (click)=\"deleteField(edtField.code, $event)\"\n                        size=\"s\"\n                        icon=\"ri-delete-bin-line\"\n                        color=\"red\"\n                        type=\"ghost\"\n                        [iconOnly]=\"true\">\n                    </ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FieldTypeSelectorComponent, selector: "lib-field-type-selector", outputs: ["selectType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: false, isRequired: false, transformFunction: null }, selectedSubFieldCode: { classPropertyName: "selectedSubFieldCode", publicName: "selectedSubFieldCode", isSignal: false, isRequired: false, transformFunction: null }, visibilityParentFieldCodes: { classPropertyName: "visibilityParentFieldCodes", publicName: "visibilityParentFieldCodes", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField", notifySelectedSubField: "notifySelectedSubField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n        </div>\r\n        <ui-button\r\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n            [disabled]=\"isBlockVisibilityParent()\"\r\n            (click)=\"requestDeleteBlock($event)\"\r\n            size=\"s\"\r\n            icon=\"ri-delete-bin-line\"\r\n            color=\"red\"\r\n            type=\"ghost\"\r\n            [iconOnly]=\"true\">\r\n        </ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n            <div class=\"field-with-subfields\">\r\n                <div\r\n                    class=\"xfield-card\"\r\n                    cdkDrag\r\n                    [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n                    (click)=\"selectField(edtField)\">\r\n                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                    <div class=\"xfield-card-icon\">\r\n                        <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n                    </div>\r\n                    <div class=\"xfield-card-body\">\r\n                        <b> {{edtField.fieldData.label}} \r\n                            @if(edtField.fieldData.visibilityRules) {\r\n                                <i class=\"branched-field ri-git-merge-line\"></i> \r\n                                <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\r\n                            }\r\n                        </b>\r\n                        <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n                    </div>\r\n                    <div class=\"xfield-card-actions\">\r\n                        @if (edtField.fieldData.type === 'repeater') {\r\n                            <ui-button\r\n                                [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n                                size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                (click)=\"toggleRepeater(edtField.code, $event)\">\r\n                            </ui-button>\r\n                        }\r\n                        <ui-button\r\n                            [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n                            [disabled]=\"isVisibilityParent(edtField.code)\"\r\n                            (click)=\"deleteField(edtField.code, $event)\"\r\n                            size=\"s\"\r\n                            icon=\"ri-delete-bin-line\"\r\n                            color=\"red\"\r\n                            type=\"ghost\"\r\n                            [iconOnly]=\"true\">\r\n                        </ui-button>\r\n                    </div>\r\n                </div>\r\n\r\n                @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n                    <div class=\"repeater-inline-panel\">\r\n                        <div\r\n                            class=\"repeater-subfields-list\"\r\n                            cdkDropList\r\n                            [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n                            (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n                            @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n                                <div\r\n                                    class=\"xfield-card subfield-card\"\r\n                                    cdkDrag\r\n                                    [class.selected-field]=\"selectedSubFieldCode === sf.code\"\r\n                                    (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n                                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n                                    <div class=\"xfield-card-icon\">\r\n                                        <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-body\">\r\n                                        <b>{{ sf.fieldData.label || sf.fieldData.name }}</b>\r\n                                        <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-actions\">\r\n                                        <ui-button\r\n                                            size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                            (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n                                        </ui-button>\r\n                                    </div>\r\n                                </div>\r\n                            } @empty {\r\n                                <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"new-subfield\">\r\n                            {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n                            <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FieldTypeSelectorComponent, selector: "lib-field-type-selector", inputs: ["excludeTypes"], outputs: ["selectType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
             type: Component,
@@ -9508,9 +9921,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DragDropModule,
                         FormsModule,
                         FieldTypeSelectorComponent
-                    ], template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\n            [disabled]=\"isBlockVisibilityParent()\"\n            (click)=\"requestDeleteBlock($event)\"\n            size=\"s\"\n            icon=\"ri-delete-bin-line\"\n            color=\"red\"\n            type=\"ghost\"\n            [iconOnly]=\"true\">\n        </ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button\n                        [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\n                        [disabled]=\"isVisibilityParent(edtField.code)\"\n                        (click)=\"deleteField(edtField.code, $event)\"\n                        size=\"s\"\n                        icon=\"ri-delete-bin-line\"\n                        color=\"red\"\n                        type=\"ghost\"\n                        [iconOnly]=\"true\">\n                    </ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"] }]
+                    ], template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n        </div>\r\n        <ui-button\r\n            [uiTooltip]=\"(isBlockVisibilityParent() ? 'form_builder.delete_block_dependency_blocked' : 'form_builder.delete_block') | uicTranslate\"\r\n            [disabled]=\"isBlockVisibilityParent()\"\r\n            (click)=\"requestDeleteBlock($event)\"\r\n            size=\"s\"\r\n            icon=\"ri-delete-bin-line\"\r\n            color=\"red\"\r\n            type=\"ghost\"\r\n            [iconOnly]=\"true\">\r\n        </ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\r\n            <div class=\"field-with-subfields\">\r\n                <div\r\n                    class=\"xfield-card\"\r\n                    cdkDrag\r\n                    [class.selected-field]=\"isRepeaterParentSelected(edtField)\"\r\n                    (click)=\"selectField(edtField)\">\r\n                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                    <div class=\"xfield-card-icon\">\r\n                        <i [class]=\"edtField.field?.icon ?? ''\"></i> \r\n                    </div>\r\n                    <div class=\"xfield-card-body\">\r\n                        <b> {{edtField.fieldData.label}} \r\n                            @if(edtField.fieldData.visibilityRules) {\r\n                                <i class=\"branched-field ri-git-merge-line\"></i> \r\n                                <span class=\"vs-rule\"> {{edtField.fieldData.visibilityRules[0]?.fieldLabel ?? edtField.fieldData.visibilityRules[0]?.fieldName ?? '-'}} </span>\r\n                            }\r\n                        </b>\r\n                        <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\r\n                    </div>\r\n                    <div class=\"xfield-card-actions\">\r\n                        @if (edtField.fieldData.type === 'repeater') {\r\n                            <ui-button\r\n                                [icon]=\"isRepeaterExpanded(edtField.code) ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'\"\r\n                                size=\"s\" color=\"black\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                (click)=\"toggleRepeater(edtField.code, $event)\">\r\n                            </ui-button>\r\n                        }\r\n                        <ui-button\r\n                            [uiTooltip]=\"(isVisibilityParent(edtField.code) ? 'form_builder.delete_field_dependency_blocked' : 'form_builder.field_editor.delete') | uicTranslate\"\r\n                            [disabled]=\"isVisibilityParent(edtField.code)\"\r\n                            (click)=\"deleteField(edtField.code, $event)\"\r\n                            size=\"s\"\r\n                            icon=\"ri-delete-bin-line\"\r\n                            color=\"red\"\r\n                            type=\"ghost\"\r\n                            [iconOnly]=\"true\">\r\n                        </ui-button>\r\n                    </div>\r\n                </div>\r\n\r\n                @if (edtField.fieldData.type === 'repeater' && isRepeaterExpanded(edtField.code)) {\r\n                    <div class=\"repeater-inline-panel\">\r\n                        <div\r\n                            class=\"repeater-subfields-list\"\r\n                            cdkDropList\r\n                            [cdkDropListData]=\"edtField.repeaterSubFields ?? []\"\r\n                            (cdkDropListDropped)=\"reorderSubFields(edtField.code, $event)\">\r\n                            @for (sf of edtField.repeaterSubFields ?? []; track sf.code) {\r\n                                <div\r\n                                    class=\"xfield-card subfield-card\"\r\n                                    cdkDrag\r\n                                    [class.selected-field]=\"selectedSubFieldCode === sf.code\"\r\n                                    (click)=\"onSelectSubField(edtField.code, sf, $event)\">\r\n                                    <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n                                    <div class=\"xfield-card-icon\">\r\n                                        <i [class]=\"sf.field?.icon ?? 'ri-question-line'\"></i>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-body\">\r\n                                        <b>{{ sf.fieldData.label || sf.fieldData.name }}</b>\r\n                                        <p>{{ sf.field?.label ?? sf.type ?? sf.fieldData.type }}</p>\r\n                                    </div>\r\n                                    <div class=\"xfield-card-actions\">\r\n                                        <ui-button\r\n                                            size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"\r\n                                            (click)=\"deleteSubField(edtField.code, sf.code, $event)\">\r\n                                        </ui-button>\r\n                                    </div>\r\n                                </div>\r\n                            } @empty {\r\n                                <p class=\"empty-hint\">{{'form_builder.repeater.no_subfields' | uicTranslate}}</p>\r\n                            }\r\n                        </div>\r\n                        <div class=\"new-subfield\">\r\n                            {{'form_builder.repeater.add_subfield' | uicTranslate}}\r\n                            <lib-field-type-selector [excludeTypes]=\"excludeSubFieldTypes\" (selectType)=\"addSubField(edtField.code, $event)\"></lib-field-type-selector>\r\n                        </div>\r\n                    </div>\r\n                }\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.field-with-subfields{display:flex;flex-direction:column;gap:0}.repeater-inline-panel{background-color:var(--grey-100);border:solid 1px var(--blue-300);border-top:none;border-radius:0 0 5px 5px;padding:10px 10px 8px 28px;display:flex;flex-direction:column;gap:8px}.repeater-subfields-list{display:flex;flex-direction:column;gap:6px;min-height:6px}.subfield-card{font-size:13px;border-radius:4px;padding:7px 8px!important}.subfield-card .xfield-card-icon{width:26px!important;height:26px!important;font-size:16px!important}.subfield-card b{font-size:13px}.subfield-card p{font-size:11px}.new-subfield{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-500);flex-wrap:wrap;padding-top:2px}.empty-hint{font-size:12px;color:var(--grey-400);text-align:center;padding:4px 0;margin:0}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}.vs-rule{font-size:12px;color:var(--grey-600)}\n"] }]
         }], propDecorators: { selectedFieldId: [{
                 type: Input
+            }], selectedSubFieldCode: [{
+                type: Input
             }], visibilityParentFieldCodes: [{
                 type: Input
             }] } });
@@ -9533,6 +9948,7 @@ class UicUserFormbuilderComponent {
     editingSnapshot = signal(null);
     isReadOnly = signal(true);
     selectedField = signal(null);
+    editingSubField = signal(null);
     focusNewFieldCode = signal(null);
     propertiesWidth = signal(250);
     previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols()));
@@ -9597,6 +10013,18 @@ class UicUserFormbuilderComponent {
             if (selectedField !== this.selectedField()) {
                 this.selectedField.set(selectedField);
             }
+            // Sync editingSubField
+            const subCtx = this.editingSubField();
+            if (subCtx) {
+                const parentField = blocks.flatMap(b => b.fields).find(f => f.code === subCtx.parentCode);
+                const latestSf = parentField?.repeaterSubFields?.find(sf => sf.code === subCtx.subField.code);
+                if (!latestSf) {
+                    this.editingSubField.set(null);
+                }
+                else if (latestSf !== subCtx.subField) {
+                    this.editingSubField.set({ ...subCtx, subField: latestSf });
+                }
+            }
         });
     }
     addBlock() {
@@ -9639,6 +10067,38 @@ class UicUserFormbuilderComponent {
     selectField(field) {
         this.selectedField.set(field);
         this.focusNewFieldCode.set(null);
+        this.editingSubField.set(null);
+    }
+    onSelectSubField(event) {
+        this.editingSubField.set(event);
+        if (event) {
+            // Highlight the parent repeater field in the block (deselect root selection)
+            const parentField = this.editableBlocks()
+                .flatMap(b => b.fields)
+                .find(f => f.code === event.parentCode);
+            if (parentField)
+                this.selectedField.set(parentField);
+        }
+    }
+    onSubFieldChange(updatedFieldData) {
+        const context = this.editingSubField();
+        if (!context)
+            return;
+        const updatedSubField = {
+            ...context.subField,
+            type: updatedFieldData.type,
+            fieldData: updatedFieldData
+        };
+        this.editingSubField.set({ ...context, subField: updatedSubField });
+        this.editableBlocks.update(blocks => blocks.map(block => ({
+            ...block,
+            fields: block.fields.map(field => {
+                if (field.code !== context.parentCode)
+                    return field;
+                const updatedSubFields = (field.repeaterSubFields ?? []).map(sf => sf.code !== context.subField.code ? sf : updatedSubField);
+                return { ...field, repeaterSubFields: updatedSubFields };
+            })
+        })));
     }
     startPropertiesResize(event) {
         event.preventDefault();
@@ -9687,7 +10147,10 @@ class UicUserFormbuilderComponent {
             cols: this.editableCols(),
             blocks: blocksWithOrderedFields.map(block => ({
                 ...block,
-                fields: block.fields.map(({ field, ...restField }) => restField)
+                fields: block.fields.map(({ field, ...restField }) => ({
+                    ...restField,
+                    repeaterSubFields: restField.repeaterSubFields?.map(({ field: _sf, ...sfRest }) => sfRest)
+                }))
             }))
         });
     }
@@ -9788,6 +10251,22 @@ class UicUserFormbuilderComponent {
                         };
                     }
                 }
+                // Hydrate sub-fields for repeater
+                if (hydratedField.repeaterSubFields?.length) {
+                    const hydratedSubFields = hydratedField.repeaterSubFields.map(sf => {
+                        if (sf.field)
+                            return sf;
+                        const sfConfig = FIELDS_CONFIG.find(c => c.value === sf.type);
+                        if (!sfConfig)
+                            return sf;
+                        changed = true;
+                        blockChanged = true;
+                        return { ...sf, field: sfConfig };
+                    });
+                    if (hydratedSubFields !== hydratedField.repeaterSubFields) {
+                        hydratedField = { ...hydratedField, repeaterSubFields: hydratedSubFields };
+                    }
+                }
                 const visibilityRules = hydratedField.fieldData.visibilityRules;
                 if (!visibilityRules?.length)
                     return hydratedField;
@@ -9861,7 +10340,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 }, selectOptionsResolver: { classPropertyName: "selectOptionsResolver", publicName: "selectOptionsResolver", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div 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        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!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 \n                            [block]=\"block\"\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\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()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\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                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\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;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.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}.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}\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", "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", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId", "visibilityParentFieldCodes"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }, { 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 }, selectOptionsResolver: { classPropertyName: "selectOptionsResolver", publicName: "selectOptionsResolver", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div 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        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!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                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"{}\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\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;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.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}.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}\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", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "isSubField", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId", "selectedSubFieldCode", "visibilityParentFieldCodes"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField", "notifySelectedSubField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
             type: Component,
@@ -9873,7 +10352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         BlockEditorComponent,
                         UicSelectComponent
-                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div 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        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!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 \n                            [block]=\"block\"\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\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()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\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                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\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;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.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}.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}\n"] }]
+                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\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        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!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                            [visibilityParentFieldCodes]=\"visibilityParentFieldCodes()\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectField($event)\"\r\n                            (notifySelectedSubField)=\"onSelectSubField($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\r\n                <div\r\n                    class=\"formeditor-properties-resize\"\r\n                    (mousedown)=\"startPropertiesResize($event)\">\r\n                </div>\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (editingSubField()) {\r\n                        <div class=\"subfield-back-header\">\r\n                            <i class=\"ri-stack-line\"></i>\r\n                            <span>{{editingSubField()!.subField.fieldData.label || editingSubField()!.subField.fieldData.name}}</span>\r\n                        </div>\r\n                        <lib-field-editor\r\n                            [config]=\"editingSubField()!.subField\"\r\n                            [isSubField]=\"true\"\r\n                            [options]=\"{}\"\r\n                            (fieldChange)=\"onSubFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    } @else if (selectedField()) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\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;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.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}.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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], formTitle: [{
@@ -10691,5 +11170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BASE_FORM_FIELDS, BRANCH_FORM_FIELDS, DROPDOWN_OVERLAY_CONTROLS, EXTRA_FORM_FIELDS, FIELDS_CONFIG, FirstCapitalPipe, LAYOUT_FORM_FIELDS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UIC_TRANSLATE_CONFIG, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicEditableTableComponent, UicExcelTableComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicProgressBarComponent, UicPushAlertService, UicRadioComponent, UicRuleBuilderComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonCardsComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTextareaAutoresizeDirective, UicTextareaAutoresizeMaxRowsDirective, UicTextareaAutoresizeMinRowsDirective, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTranslatePipe, UicTranslateService, UicTreeAdminComponent, UicUserFormbuilderComponent, UicWorkPanelComponent, VISIBILITY_OPERATOR_OPTIONS, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperShowFormFromBuilder, helperTableMapDatoToColums, highlightRow, isMobile, provideUicTranslateConfig, pushTop, sideModal, simpleFade };
+export { BASE_FORM_FIELDS, BRANCH_FORM_FIELDS, DROPDOWN_OVERLAY_CONTROLS, EXTRA_FORM_FIELDS, FIELDS_CONFIG, FirstCapitalPipe, LAYOUT_FORM_FIELDS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UIC_TRANSLATE_CONFIG, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicEditableTableComponent, UicExcelTableComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicProgressBarComponent, UicPushAlertService, UicRadioComponent, UicRepeaterComponent, UicRuleBuilderComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonCardsComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTextareaAutoresizeDirective, UicTextareaAutoresizeMaxRowsDirective, UicTextareaAutoresizeMinRowsDirective, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicTranslatePipe, UicTranslateService, UicTreeAdminComponent, UicUserFormbuilderComponent, UicWorkPanelComponent, VISIBILITY_OPERATOR_OPTIONS, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperShowFormFromBuilder, helperTableMapDatoToColums, highlightRow, isMobile, provideUicTranslateConfig, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map