ui-core-abv 0.6.76 → 0.6.81

package/fesm2022/ui-core-abv.mjs

@@ -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',
@@ -3995,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);
@@ -4003,7 +4033,7 @@ class UicDynamicFormComponent {
                         return currentValue === normalizedRuleValue;
                     }
                 }
-                return currentValue === rule.value;
+                return currentValue == rule.value;
             }
             case 'notEquals': {
                 if (typeof currentValue === 'boolean') {
@@ -4012,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);
@@ -4042,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;
@@ -8472,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', 'optionsSource.key', 'optionsSource.idField', 'optionsSource.textField', 'optionsSource.textTemplate', 'optionsSource.dependsOn', 'optionsSource.paramName'] },
-    { 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 = [
     {
@@ -8698,6 +8799,11 @@ const EXTRA_FORM_FIELDS = [
                 fieldName: 'optionsSource.key',
                 operator: 'notEquals',
                 value: null
+            },
+            {
+                fieldName: 'optionsSource.dependsOn',
+                operator: 'notEquals',
+                value: ''
             }
         ]
     },
@@ -8938,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
     },
@@ -9046,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();
     });
     /*
       {
@@ -9077,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();
             }
         });
@@ -9089,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;
@@ -9119,6 +9230,7 @@ class FieldEditorComponent {
             ...this.localField(),
             visibilityRules: []
         };
+        this.branchDraftValues.set({});
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
     }
@@ -9127,6 +9239,7 @@ class FieldEditorComponent {
             ...this.localField(),
             visibilityRules: null
         };
+        this.branchDraftValues.set({});
         this.localField.set(updatedField);
         this.fieldChange.emit(updatedField);
     }
@@ -9211,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 (hasOptionsSourceConfig()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (hasOptions() && !hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, 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,
@@ -9228,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 (hasOptionsSourceConfig()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (hasOptions() && !hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
+                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\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 {
@@ -9258,6 +9455,7 @@ class BlockEditorComponent {
     deleteBlock = output();
     notifySelectedField = output();
     selectedFieldId = null;
+    visibilityParentFieldCodes = new Set();
     selectField(field) {
         this.notifySelectedField.emit(field);
     }
@@ -9270,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;
@@ -9285,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,
@@ -9296,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 {
@@ -9322,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;
@@ -9332,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,
@@ -9641,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,
@@ -9653,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: [{
@@ -10471,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