ui-core-abv 0.6.74 → 0.6.81

package/fesm2022/ui-core-abv.mjs

@@ -4,7 +4,7 @@ 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 { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, isObservable, from, Subscription } from 'rxjs';
+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';
 import * as i1$2 from '@angular/cdk/portal';
@@ -388,6 +388,8 @@ const DICTIONARY_EN = {
         block_subtitle: 'Subtitle',
         add_block: 'Add block',
         delete_block: 'Delete block',
+        delete_block_dependency_blocked: 'This block cannot be deleted because it contains fields that other fields depend on',
+        delete_field_dependency_blocked: 'This field cannot be deleted because another field depends on its value',
         preview_form: 'Preview',
         submit_form: 'Submit',
         select_field_to_edit: 'Select a field to edit its properties',
@@ -512,6 +514,16 @@ const DICTIONARY_EN = {
             show_advanced: 'Show advanced',
             hide_advanced: 'Hide advanced',
         },
+        visibility_operators: {
+            equals: 'Equals',
+            notEquals: 'Does not equal',
+            greaterThan: 'Is greater than',
+            lessThan: 'Is less than',
+            includes: 'Includes',
+            notIncludes: 'Does not include',
+            isEmpty: 'Is empty',
+            isNotEmpty: 'Is not empty',
+        },
         validation: {
             duplicate_identifier: 'The identifier "{{identifier}}" is used more than once.',
             duplicate_identifier_title: 'Validation error',
@@ -691,6 +703,8 @@ const DICTIONARY_ES = {
         block_subtitle: 'Subtítulo',
         add_block: 'Agregar bloque',
         delete_block: 'Eliminar bloque',
+        delete_block_dependency_blocked: 'Este bloque no se puede eliminar porque contiene campos de los que dependen otros campos',
+        delete_field_dependency_blocked: 'Este campo no se puede eliminar porque otro campo depende de su valor',
         preview_form: 'Vista previa',
         submit_form: 'Guardar',
         select_field_to_edit: 'Selecciona un campo para editar sus propiedades',
@@ -773,16 +787,16 @@ const DICTIONARY_ES = {
             iaValidation: 'Validación IA',
             iaValidationPrompt: 'Prompt de validación IA',
             searchApi_tip: 'URL para obtener opciones de búsqueda',
-            optionsSourceKey: 'Fuente de opciones',
-            optionsSourceKey_tip: 'Clave lógica registrada por la aplicación consumidora',
-            optionsSourceIdField: 'Campo ID de opción',
-            optionsSourceIdField_tip: 'Ruta del valor usado como id. Ejemplo: id',
-            optionsSourceTextField: 'Campo texto de opción',
-            optionsSourceTextField_tip: 'Ruta del valor usado como texto. Ejemplo: name',
+            optionsSourceKey: 'Origen de opciones',
+            optionsSourceKey_tip: 'Opciones manuales o API externa',
+            optionsSourceIdField: 'Nombre de campo ID',
+            optionsSourceIdField_tip: 'Propiedad del objeto para usar como ID',
+            optionsSourceTextField: 'Nombre de campo de texto',
+            optionsSourceTextField_tip: 'Propiedad del objeto para mostrar',
             optionsSourceTextTemplate: 'Plantilla de texto',
             optionsSourceTextTemplate_tip: 'Ejemplo: {{name}} ({{id}})',
             optionsSourceDependsOn: 'Depende de',
-            optionsSourceDependsOn_tip: 'Identificador del campo padre que dispara la recarga',
+            optionsSourceDependsOn_tip: 'Campo para filtrar opciones según valor',
             optionsSourceParamName: 'Nombre del parámetro',
             optionsSourceParamName_tip: 'Nombre con el que se envía el valor dependiente',
             selectNullable_tip: 'Permite seleccionar una opción vacía',
@@ -815,6 +829,16 @@ const DICTIONARY_ES = {
             show_advanced: 'Mostrar avanzado',
             hide_advanced: 'Ocultar avanzado',
         },
+        visibility_operators: {
+            equals: 'Es igual a',
+            notEquals: 'No es igual a',
+            greaterThan: 'Es mayor que',
+            lessThan: 'Es menor que',
+            includes: 'Incluye',
+            notIncludes: 'No incluye',
+            isEmpty: 'Está vacío',
+            isNotEmpty: 'No está vacío',
+        },
         validation: {
             duplicate_identifier: 'El identificador "{{identifier}}" se está usando más de una vez.',
             duplicate_identifier_title: 'Error de validación',
@@ -3885,6 +3909,7 @@ class UicDynamicFormComponent {
     voiceToTextSilenceMs = 2000;
     cols = 2;
     fileUidResolverFn;
+    selectOptionsResolver;
     listeningField = null;
     fieldStates = computed(() => {
         const currentForm = this.formSignal();
@@ -3994,7 +4019,13 @@ class UicDynamicFormComponent {
     }
     matchesVisibilityRule(rule) {
         const currentValue = this.getValueByFieldName(rule.fieldName);
+        const dependencyField = this.findFieldByName(rule.fieldName);
+        const dependencyType = dependencyField?.type;
         switch (rule.operator) {
+            case 'isEmpty':
+                return this.isEmptyValue(currentValue);
+            case 'isNotEmpty':
+                return !this.isEmptyValue(currentValue);
             case 'equals': {
                 if (typeof currentValue === 'boolean') {
                     const normalizedRuleValue = this.parseBooleanLike(rule.value);
@@ -4002,7 +4033,7 @@ class UicDynamicFormComponent {
                         return currentValue === normalizedRuleValue;
                     }
                 }
-                return currentValue === rule.value;
+                return currentValue == rule.value;
             }
             case 'notEquals': {
                 if (typeof currentValue === 'boolean') {
@@ -4011,27 +4042,33 @@ class UicDynamicFormComponent {
                         return currentValue !== normalizedRuleValue;
                     }
                 }
-                return currentValue !== rule.value;
+                return currentValue != rule.value;
             }
             case 'greaterThan':
-                return Number(currentValue) > Number(rule.value);
+                return this.compareVisibilityValues(currentValue, rule.value, dependencyType) > 0;
             case 'lessThan':
-                return Number(currentValue) < Number(rule.value);
+                return this.compareVisibilityValues(currentValue, rule.value, dependencyType) < 0;
             case 'includes':
+                if (dependencyType === 'phone') {
+                    return this.getPhoneComparableValue(currentValue).includes(String(rule.value ?? ''));
+                }
                 if (currentValue == null)
                     return false;
                 if (Array.isArray(currentValue)) {
-                    return currentValue.includes(rule.value);
+                    return this.arrayIncludesVisibilityValue(currentValue, rule.value);
                 }
                 if (typeof currentValue === 'string') {
                     return currentValue.includes(rule.value);
                 }
                 return false;
             case 'notIncludes':
+                if (dependencyType === 'phone') {
+                    return !this.getPhoneComparableValue(currentValue).includes(String(rule.value ?? ''));
+                }
                 if (currentValue == null)
                     return true;
                 if (Array.isArray(currentValue)) {
-                    return !currentValue.includes(rule.value);
+                    return !this.arrayIncludesVisibilityValue(currentValue, rule.value);
                 }
                 if (typeof currentValue === 'string') {
                     return !currentValue.includes(rule.value);
@@ -4041,6 +4078,61 @@ class UicDynamicFormComponent {
                 return true;
         }
     }
+    findFieldByName(fieldName) {
+        return this.fieldsSignal().find(field => field.name === fieldName);
+    }
+    isEmptyValue(value) {
+        if (value === null || value === undefined)
+            return true;
+        if (typeof value === 'string')
+            return value.trim().length === 0;
+        if (Array.isArray(value))
+            return value.length === 0;
+        if (typeof value === 'object')
+            return Object.keys(value).length === 0;
+        return false;
+    }
+    compareVisibilityValues(currentValue, ruleValue, fieldType) {
+        const currentComparable = this.toComparableVisibilityValue(currentValue, fieldType);
+        const ruleComparable = this.toComparableVisibilityValue(ruleValue, fieldType);
+        if (currentComparable === null || ruleComparable === null) {
+            return Number.NaN;
+        }
+        return currentComparable - ruleComparable;
+    }
+    toComparableVisibilityValue(value, fieldType) {
+        if (value === null || value === undefined || value === '')
+            return null;
+        if (fieldType === 'date') {
+            const timestamp = Date.parse(String(value));
+            return Number.isNaN(timestamp) ? null : timestamp;
+        }
+        if (fieldType === 'time') {
+            const match = String(value).match(/^(\d{1,2}):(\d{2})$/);
+            if (!match)
+                return null;
+            const hours = Number(match[1]);
+            const minutes = Number(match[2]);
+            if (!Number.isFinite(hours) || !Number.isFinite(minutes))
+                return null;
+            return hours * 60 + minutes;
+        }
+        const numericValue = Number(value);
+        return Number.isNaN(numericValue) ? null : numericValue;
+    }
+    getPhoneComparableValue(value) {
+        if (!value)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'object') {
+            return String(value.internationalNumber ?? '');
+        }
+        return '';
+    }
+    arrayIncludesVisibilityValue(values, ruleValue) {
+        return values.some(value => value == ruleValue);
+    }
     parseBooleanLike(value) {
         if (typeof value === 'boolean')
             return value;
@@ -4138,6 +4230,25 @@ class UicDynamicFormComponent {
         if (field.searchFn) {
             return field.searchFn;
         }
+        if (field.optionsSource?.key && this.selectOptionsResolver) {
+            const cached = this.searchFnCache.get(field);
+            if (cached) {
+                return cached;
+            }
+            const searchFn = (query) => {
+                const values = this.toNestedValues(this.formSignal()?.getRawValue?.() ?? {});
+                const source = field.optionsSource;
+                const dependencyValue = source.dependsOn ? this.getValueByPath(values, source.dependsOn) : undefined;
+                return this.toObservable(this.selectOptionsResolver(source, {
+                    field,
+                    values,
+                    dependencyValue,
+                    query
+                })).pipe(map(items => Array.isArray(items) ? items : []));
+            };
+            this.searchFnCache.set(field, searchFn);
+            return searchFn;
+        }
         if (!field.searchApi) {
             return undefined;
         }
@@ -4155,6 +4266,15 @@ class UicDynamicFormComponent {
         if (field.searchFn) {
             return field.searchDisplayFn;
         }
+        if (field.optionsSource?.key) {
+            const cached = this.searchDisplayFnCache.get(field);
+            if (cached) {
+                return cached;
+            }
+            const displayFn = (item) => this.getOptionsSourceText(item, field);
+            this.searchDisplayFnCache.set(field, displayFn);
+            return displayFn;
+        }
         if (!field.searchApi) {
             return field.searchDisplayFn;
         }
@@ -4181,6 +4301,65 @@ class UicDynamicFormComponent {
         this.searchIsEnabledFnCache.set(field, isEnabledFn);
         return isEnabledFn;
     }
+    toObservable(value) {
+        if (isObservable(value)) {
+            return value;
+        }
+        if (value instanceof Promise) {
+            return from(value);
+        }
+        return of(value ?? []);
+    }
+    getOptionsSourceText(item, field) {
+        const source = field.optionsSource;
+        if (!source || !item || typeof item !== 'object')
+            return '';
+        if (source.textTemplate) {
+            return this.renderOptionsSourceTemplate(source.textTemplate, item);
+        }
+        const text = this.getValueByPath(item, source.textField?.trim() || 'text');
+        const id = this.getValueByPath(item, source.idField?.trim() || 'id');
+        return String(text ?? id ?? '');
+    }
+    renderOptionsSourceTemplate(template, item) {
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_match, path) => {
+            const value = this.getValueByPath(item, path);
+            return value === null || value === undefined ? '' : String(value);
+        });
+    }
+    getValueByPath(source, path) {
+        if (!path)
+            return undefined;
+        return path.split('.').reduce((current, key) => current?.[key], source);
+    }
+    toNestedValues(values) {
+        const nested = {};
+        Object.entries(values ?? {}).forEach(([key, value]) => {
+            this.setNestedValue(nested, key, value);
+        });
+        return nested;
+    }
+    setNestedValue(target, key, value) {
+        const parts = key.split('.');
+        if (parts.length === 1) {
+            target[key] = value;
+            return;
+        }
+        let current = target;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            const next = current[part];
+            if (next == null) {
+                current[part] = {};
+            }
+            else if (typeof next !== 'object' || Array.isArray(next)) {
+                target[key] = value;
+                return;
+            }
+            current = current[part];
+        }
+        current[parts[parts.length - 1]] = value;
+    }
     clearVoiceStopTimer() {
         if (this.voiceStopTimer) {
             clearTimeout(this.voiceStopTimer);
@@ -4270,7 +4449,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" }, 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", 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -4308,6 +4487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], fileUidResolverFn: [{
                 type: Input
+            }], selectOptionsResolver: [{
+                type: Input
             }] } });
 
 class UicFormWrapperComponent {
@@ -4940,7 +5121,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        </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"] }, { 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", "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,
@@ -4950,7 +5131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         ReactiveFormsModule
-                    ], providers: [UicFormStateService], 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        </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"] }]
+                    ], providers: [UicFormStateService], 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"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], fields: [{
@@ -8382,22 +8563,32 @@ const simpleFade = trigger('simpleFade', [
 ]);
 
 ;
+const VISIBILITY_OPERATOR_OPTIONS = [
+    { id: 'equals', text: 'equals' },
+    { id: 'notEquals', text: 'notEquals' },
+    { id: 'greaterThan', text: 'greaterThan' },
+    { id: 'lessThan', text: 'lessThan' },
+    { id: 'includes', text: 'includes' },
+    { id: 'notIncludes', text: 'notIncludes' },
+    { id: 'isEmpty', text: 'isEmpty' },
+    { id: 'isNotEmpty', text: 'isNotEmpty' }
+];
 const FIELDS_CONFIG = [
-    { value: 'text', icon: 'ri-text', detail: 'Campo de texto en una sola linea', label: 'Texto corto', properties: ['placeholder', 'minLength', 'maxLength', 'showCounter'] },
-    { value: 'textarea', icon: 'ri-file-text-line', detail: 'Texto multilinea con ajuste de altura', label: 'Area de texto', properties: ['placeholder', 'minLength', 'maxLength', 'showCounter', 'voiceToTextEnabled', 'textareaResize', 'resizeMinRows', 'resizeMaxRows'] },
-    { value: 'number', icon: 'ri-hashtag', detail: 'Campo numerico con control de paso', label: 'Numero', properties: ['placeholder', 'step', 'min', 'max'] },
-    { value: 'phone', icon: 'ri-phone-line', detail: 'Telefono con pais y codigo', label: 'Telefono', properties: ['placeholder'] },
-    { value: 'select', icon: 'ri-list-unordered', detail: 'Seleccion simple desde opciones', label: 'Selector', properties: ['options', 'selectSearchEnabled', 'selectNullable'] },
-    { value: 'multyselect', icon: 'ri-list-check-2', detail: 'Seleccion multiple desde opciones', label: 'Selector multiple', properties: ['options'] },
-    { value: 'date', icon: 'ri-calendar-2-line', detail: 'Selector de fecha o mes', label: 'Fecha', properties: ['monthMode', 'monthDay', 'minDate', 'maxDate'] },
-    { value: 'time', icon: 'ri-timer-2-line', detail: 'Selector de hora', label: 'Hora', properties: ['timeInterval'] },
-    { value: 'radio', icon: 'ri-radio-button-line', detail: 'Seleccion unica entre opciones', label: 'Radio', properties: ['options'] },
-    { value: 'checkbox', icon: 'ri-checkbox-line', detail: 'Campo booleano tipo check', label: 'Checkbox', properties: ['placeholder'] },
-    { value: 'switch', icon: 'ri-toggle-line', detail: 'Campo booleano tipo switch', label: 'Switch', properties: ['placeholder'] },
-    { value: 'pool', icon: 'ri-list-indefinite', detail: 'Seleccion con lista y detalle por item', label: 'Multiopciones', properties: ['options', 'multyEnabled', 'poolEnabledListView', 'poolTitle'] },
-    { value: 'file', icon: 'ri-attachment-line', detail: 'Carga de archivos', label: 'Archivo', properties: ['multyEnabled', 'fileTypes', 'iaValidation', 'iaValidationPrompt'] },
-    { value: 'searcher', icon: 'ri-seo-line', detail: 'Buscador con fuente de datos externa', label: 'Buscador', properties: ['placeholder', 'searchApi'] },
-    { value: 'slider', icon: 'ri-equalizer-2-line', detail: 'Control deslizante continuo', label: 'Deslizador', properties: ['min', 'max', 'sliderInterval', 'sliderMarks'] }
+    { value: 'text', icon: 'ri-text', detail: 'Campo de texto en una sola linea', label: 'Texto corto', properties: ['placeholder', 'minLength', 'maxLength', 'showCounter'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'textarea', icon: 'ri-file-text-line', detail: 'Texto multilinea con ajuste de altura', label: 'Area de texto', properties: ['placeholder', 'minLength', 'maxLength', 'showCounter', 'voiceToTextEnabled', 'textareaResize', 'resizeMinRows', 'resizeMaxRows'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'number', icon: 'ri-hashtag', detail: 'Campo numerico con control de paso', label: 'Numero', properties: ['placeholder', 'step', 'min', 'max'], visibility: { outputType: 'number', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'phone', icon: 'ri-phone-line', detail: 'Telefono con pais y codigo', label: 'Telefono', properties: ['placeholder'], visibility: { outputType: 'UicPhoneInputValue', operators: ['includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'select', icon: 'ri-arrow-drop-down-line', detail: 'Seleccion simple desde opciones', label: 'Selector', properties: ['options', 'selectSearchEnabled', 'selectNullable'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'multyselect', icon: 'ri-arrow-down-double-line', detail: 'Seleccion multiple desde opciones', label: 'Selector multiple', properties: ['options'], visibility: { outputType: 'string[]', operators: ['includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'date', icon: 'ri-calendar-2-line', detail: 'Selector de fecha o mes', label: 'Fecha', properties: ['monthMode', 'monthDay', 'minDate', 'maxDate'], visibility: { outputType: 'string yyyy-MM-dd', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'time', icon: 'ri-timer-2-line', detail: 'Selector de hora', label: 'Hora', properties: ['timeInterval'], visibility: { outputType: 'string HH:mm', operators: ['equals', 'notEquals', 'greaterThan', 'lessThan', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'radio', icon: 'ri-radio-button-line', detail: 'Seleccion unica entre opciones', label: 'Radio', properties: ['options'], visibility: { outputType: 'string', operators: ['equals', 'notEquals', 'includes', 'notIncludes', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'checkbox', icon: 'ri-checkbox-line', detail: 'Campo booleano tipo check', label: 'Checkbox', properties: ['placeholder'], visibility: { outputType: 'boolean', operators: ['equals', 'notEquals', 'isEmpty', 'isNotEmpty'] } },
+    { value: 'switch', icon: 'ri-toggle-line', detail: 'Campo booleano tipo switch', label: 'Switch', properties: ['placeholder'], visibility: { outputType: 'boolean', operators: ['equals', 'notEquals', 'isEmpty', 'isNotEmpty'] } },
+    { 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'] } }
 ];
 const BASE_FORM_FIELDS = [
     {
@@ -8608,6 +8799,11 @@ const EXTRA_FORM_FIELDS = [
                 fieldName: 'optionsSource.key',
                 operator: 'notEquals',
                 value: null
+            },
+            {
+                fieldName: 'optionsSource.dependsOn',
+                operator: 'notEquals',
+                value: ''
             }
         ]
     },
@@ -8848,12 +9044,7 @@ const BRANCH_FORM_FIELDS = [
         label: 'form_builder.field_editor.operator',
         type: 'select',
         options: [
-            { id: 'equals', text: 'equals' },
-            { id: 'notEquals', text: 'notEquals' },
-            { id: 'greaterThan', text: 'greaterThan' },
-            { id: 'lessThan', text: 'lessThan' },
-            { id: 'includes', text: 'includes' },
-            { id: 'notIncludes', text: 'notIncludes' }
+            ...VISIBILITY_OPERATOR_OPTIONS
         ],
         required: true
     },
@@ -8940,6 +9131,10 @@ class FieldEditorComponent {
         const fieldType = this.fieldType();
         return !!fieldType?.properties.includes('options');
     });
+    hasOptionsSourceConfig = computed(() => {
+        const fieldType = this.fieldType();
+        return !!fieldType && (fieldType.value === 'searcher' || fieldType.properties.includes('options'));
+    });
     hasExternalOptionsSource = computed(() => !!this.localField().optionsSource?.key);
     config = input.required();
     focusRequiredField = input(false);
@@ -8952,20 +9147,14 @@ class FieldEditorComponent {
     optionsSourceFields = computed(() => this.buildOptionsSourceFields());
     advancedFields = computed(() => (this.buildAdvancedBlocks()));
     styleFields = computed(() => (this.buildDesignBlocks()));
-    branchFields = this.buildBranchFields();
+    branchDraftValues = signal({});
+    branchFields = computed(() => this.buildBranchFields(this.branchDraftValues()));
     initialValues = computed(() => {
         const fieldData = this.config().fieldData;
         return fieldData ?? {};
     });
     branchInitialValues = computed(() => {
-        const firstRule = this.localField().visibilityRules?.[0];
-        if (!firstRule)
-            return {};
-        return {
-            fieldName: firstRule.fieldName ?? null,
-            operator: firstRule.operator ?? null,
-            value: firstRule.value ?? null
-        };
+        return this.branchDraftValues();
     });
     /*
       {
@@ -8983,6 +9172,7 @@ class FieldEditorComponent {
             this.localField.set(field);
             if (this.currentFieldCode !== config.code) {
                 this.currentFieldCode = config.code;
+                this.branchDraftValues.set(this.ruleToBranchValues(field.visibilityRules?.[0]));
                 this.scrollPropertiesToTop();
             }
         });
@@ -8995,8 +9185,23 @@ class FieldEditorComponent {
     }
     updateRuleValue(fr) {
         const fieldName = fr['fieldName'];
-        const operator = fr['operator'];
-        const value = fr['value'];
+        const previousDraft = this.branchDraftValues();
+        const parentChanged = fieldName !== previousDraft['fieldName'];
+        const selectedOperator = (parentChanged ? null : fr['operator']);
+        const allowedOperators = this.getAllowedVisibilityOperators(this.getDependencyFieldType(fieldName));
+        const operator = selectedOperator && allowedOperators.includes(selectedOperator)
+            ? selectedOperator
+            : null;
+        const value = parentChanged || this.isValueLessVisibilityOperator(operator) ? null : fr['value'];
+        const nextDraft = {
+            fieldName: fieldName ?? null,
+            operator,
+            value
+        };
+        this.branchDraftValues.set(nextDraft);
+        if (parentChanged) {
+            this.clearCurrentVisibilityRule();
+        }
         // Ignore partial emissions while the dependency form is still incomplete.
         if (!fieldName || !operator)
             return;
@@ -9025,6 +9230,7 @@ class FieldEditorComponent {
             ...this.localField(),
             visibilityRules: []
         };
+        this.branchDraftValues.set({});
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
     }
@@ -9033,6 +9239,7 @@ class FieldEditorComponent {
             ...this.localField(),
             visibilityRules: null
         };
+        this.branchDraftValues.set({});
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
     }
@@ -9117,15 +9324,99 @@ class FieldEditorComponent {
         }
         return field;
     }
-    buildBranchFields() {
+    buildBranchFields(values) {
+        const fieldName = values['fieldName'];
+        const dependencyType = this.getDependencyFieldType(fieldName);
+        const allowedOperators = this.getAllowedVisibilityOperators(dependencyType);
         return BRANCH_FORM_FIELDS.map(field => ({
-            ...field,
+            ...this.prepareBranchField(field, fieldName, allowedOperators),
             label: this.translateService.translate(field.label ?? ''),
             placeholder: field.placeholder ? this.translateService.translate(field.placeholder) : this.translateService.translate(field.label ?? '')
         }));
     }
+    prepareBranchField(field, fieldName, allowedOperators) {
+        if (field.name === 'operator') {
+            return {
+                ...field,
+                options: VISIBILITY_OPERATOR_OPTIONS
+                    .filter(option => allowedOperators.includes(option.id))
+                    .map(option => ({
+                    ...option,
+                    text: this.translateService.translate(`form_builder.visibility_operators.${option.id}`)
+                })),
+                visibilityRules: [
+                    { fieldName: 'fieldName', operator: 'notEquals', value: null },
+                    { fieldName: 'fieldName', operator: 'notEquals', value: '' }
+                ]
+            };
+        }
+        if (field.name === 'value') {
+            const valueField = {
+                ...field,
+                visibilityRules: [
+                    { fieldName: 'fieldName', operator: 'notEquals', value: null },
+                    { fieldName: 'fieldName', operator: 'notEquals', value: '' },
+                    { fieldName: 'operator', operator: 'notEquals', value: null },
+                    { fieldName: 'operator', operator: 'notEquals', value: '' },
+                    { fieldName: 'operator', operator: 'notEquals', value: 'isEmpty' },
+                    { fieldName: 'operator', operator: 'notEquals', value: 'isNotEmpty' }
+                ],
+                type: this.getBranchValueFieldType(fieldName)
+            };
+            if (valueField.type === 'select') {
+                valueField.options = [
+                    { id: 'true', text: 'true' },
+                    { id: 'false', text: 'false' }
+                ];
+            }
+            return valueField;
+        }
+        return field;
+    }
+    getAllowedVisibilityOperators(fieldType) {
+        return FIELDS_CONFIG.find(field => field.value === fieldType)?.visibility.operators ?? [];
+    }
+    getDependencyFieldType(fieldName) {
+        const option = this.options()['fieldName']?.find(item => item.id === fieldName);
+        const type = option?.fieldType;
+        return FIELDS_CONFIG.some(field => field.value === type) ? type : null;
+    }
+    getBranchValueFieldType(fieldName) {
+        const dependencyType = this.getDependencyFieldType(fieldName);
+        if (dependencyType === 'number' || dependencyType === 'slider')
+            return 'number';
+        if (dependencyType === 'date')
+            return 'date';
+        if (dependencyType === 'time')
+            return 'time';
+        if (dependencyType === 'checkbox' || dependencyType === 'switch')
+            return 'select';
+        return 'text';
+    }
+    ruleToBranchValues(rule) {
+        if (!rule)
+            return {};
+        return {
+            fieldName: rule.fieldName ?? null,
+            operator: rule.operator ?? null,
+            value: rule.value ?? null
+        };
+    }
+    clearCurrentVisibilityRule() {
+        if (!this.localField().visibilityRules?.length)
+            return;
+        const updatedField = {
+            ...this.localField(),
+            visibilityRules: []
+        };
+        this.localField.set(updatedField);
+        this.fieldChange.emit(updatedField);
+    }
+    isValueLessVisibilityOperator(operator) {
+        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 (hasOptions()) {\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 (!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 }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
             type: Component,
@@ -9134,7 +9425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\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 (hasOptions()) {\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 (!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>\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"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
@@ -9164,6 +9455,7 @@ class BlockEditorComponent {
     deleteBlock = output();
     notifySelectedField = output();
     selectedFieldId = null;
+    visibilityParentFieldCodes = new Set();
     selectField(field) {
         this.notifySelectedField.emit(field);
     }
@@ -9176,13 +9468,27 @@ class BlockEditorComponent {
     addField(newFieldType) {
         this.addFieldRequest.emit(newFieldType);
     }
+    requestDeleteBlock(e) {
+        e.stopPropagation();
+        if (this.isBlockVisibilityParent())
+            return;
+        this.deleteBlock.emit(this.block().code);
+    }
     deleteField(fieldCode, e) {
         e.stopPropagation();
+        if (this.isVisibilityParent(fieldCode))
+            return;
         this.blockChange.emit({ ...this.block(), fields: this.block().fields.filter(f => f.code !== fieldCode) });
         if (this.selectedFieldId === fieldCode) {
             this.notifySelectedField.emit(null);
         }
     }
+    isVisibilityParent(fieldCode) {
+        return this.visibilityParentFieldCodes.has(fieldCode);
+    }
+    isBlockVisibilityParent() {
+        return this.block().fields.some(field => this.isVisibilityParent(field.code));
+    }
     reorderFields(event) {
         if (event.previousIndex === event.currentIndex)
             return;
@@ -9191,7 +9497,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 } }, 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 [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></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 (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></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 }, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
             type: Component,
@@ -9202,9 +9508,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 [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></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 (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></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\">\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"] }]
         }], propDecorators: { selectedFieldId: [{
                 type: Input
+            }], visibilityParentFieldCodes: [{
+                type: Input
             }] } });
 
 class UicUserFormbuilderComponent {
@@ -9228,6 +9536,11 @@ class UicUserFormbuilderComponent {
     focusNewFieldCode = signal(null);
     propertiesWidth = signal(250);
     previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.editableCols()));
+    visibilityParentFieldCodes = computed(() => new Set(this.editableBlocks()
+        .flatMap(block => block.fields)
+        .flatMap(field => field.fieldData.visibilityRules ?? [])
+        .map(rule => rule.fieldName)
+        .filter((fieldName) => !!fieldName)));
     isResizingProperties = false;
     resizeStartX = 0;
     resizeStartWidth = 0;
@@ -9238,7 +9551,8 @@ class UicUserFormbuilderComponent {
             .filter(field => field.code !== currentSelected?.code)
             .map(field => ({
             id: field.code,
-            text: field.fieldData.label || field.fieldData.name
+            text: field.fieldData.label || field.fieldData.name,
+            fieldType: field.fieldData.type
         }));
         return {
             fieldName: fieldOptions,
@@ -9547,7 +9861,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 \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\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"], 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 \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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
             type: Component,
@@ -9559,7 +9873,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 \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\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 \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"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], formTitle: [{
@@ -10377,5 +10691,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, 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, 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