ui-core-abv 0.6.41 → 0.6.44

package/fesm2022/ui-core-abv.mjs

@@ -4371,7 +4371,7 @@ class UicFormWrapperComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [disabled]=\"disabled\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
@@ -4381,7 +4381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         ReactiveFormsModule
-                    ], providers: [UicFormStateService], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"] }]
+                    ], providers: [UicFormStateService], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [disabled]=\"disabled\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], fields: [{
@@ -5807,6 +5807,35 @@ function isMobile() {
         .getPropertyValue('--bp-mobile');
     return window.matchMedia(`(max-width: ${mobileBP})`).matches;
 }
+function helperShowFormFromBuilder(blocks, cols, editable = false) {
+    return {
+        cols: cols,
+        blocks: mapEditableBlocksToBlocks(blocks, editable)
+    };
+}
+function mapEditableBlocksToBlocks(blocks, editable) {
+    const fieldCodeToName = new Map();
+    blocks.forEach(block => {
+        block.fields.forEach(field => {
+            fieldCodeToName.set(field.code, field.fieldData.name);
+        });
+    });
+    return blocks.map(block => ({
+        title: block.title,
+        subtitle: block.subtitle,
+        fields: block.fields.map(field => {
+            const visibilityRules = field.fieldData.visibilityRules?.map(rule => ({
+                ...rule,
+                fieldName: fieldCodeToName.get(rule.fieldName) ?? rule.fieldName
+            }));
+            return {
+                ...field.fieldData,
+                disabled: !editable,
+                visibilityRules: visibilityRules ?? field.fieldData.visibilityRules
+            };
+        })
+    }));
+}
 
 class UicTableComponent {
     columns = [];
@@ -8425,7 +8454,7 @@ class FieldEditorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, 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        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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>", 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", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { 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 }, 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        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { 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,
@@ -8434,7 +8463,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        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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>", 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        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\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 {
@@ -8453,15 +8482,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class BlockEditorComponent {
     block = input({
-        id: 0,
         title: '',
+        code: '',
+        order: 1,
         subtitle: '',
         fields: []
     });
     blockChange = output();
+    addFieldRequest = output();
     deleteBlock = output();
     notifySelectedField = output();
-    nextFieldId = 0;
     selectedFieldId = null;
     selectField(field) {
         this.notifySelectedField.emit(field);
@@ -8473,13 +8503,12 @@ class BlockEditorComponent {
         this.blockChange.emit({ ...this.block(), subtitle: newSubtitle });
     }
     addField(newFieldType) {
-        const fieldId = this.block().id + '_' + this.nextFieldId++;
-        this.blockChange.emit({ ...this.block(), fields: [...this.block().fields, { id: fieldId, field: newFieldType, fieldData: { name: 'field_' + fieldId, label: 'New field', type: newFieldType.value } }] });
+        this.addFieldRequest.emit(newFieldType);
     }
-    deleteField(fieldId, e) {
+    deleteField(fieldCode, e) {
         e.stopPropagation();
-        this.blockChange.emit({ ...this.block(), fields: this.block().fields.filter(f => f.id !== fieldId) });
-        if (this.selectedFieldId === fieldId) {
+        this.blockChange.emit({ ...this.block(), fields: this.block().fields.filter(f => f.code !== fieldCode) });
+        if (this.selectedFieldId === fieldCode) {
             this.notifySelectedField.emit(null);
         }
     }
@@ -8491,7 +8520,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", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\"   (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n        </div>\r\n        <ui-button [tip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().id)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.id; let i = $index) {\r\n            <div\r\n                class=\"xfield-card\"\r\n                cdkDrag\r\n                [class.selected-field]=\"selectedFieldId === edtField.id\"\r\n                (click)=\"selectField(edtField)\">\r\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                <div class=\"xfield-card-icon\">\r\n                    <i [class]=\"edtField.field.icon\"></i> \r\n                </div>\r\n                <div class=\"xfield-card-body\">\r\n                    <b> {{edtField.fieldData.label}} \r\n                        @if(edtField.fieldData.visibilityRules) {\r\n                            <i class=\"branched-field ri-git-merge-line\"></i> \r\n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\r\n                        }\r\n                    </b>\r\n                    <p> {{edtField.field.label}} </p>\r\n                </div>\r\n                <div class=\"xfield-card-actions\">\r\n                    <ui-button (click)=\"deleteField(edtField.id, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\r\n                </div>\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { 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 } }, 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 [tip]=\"'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> {{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}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { 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,
@@ -8502,71 +8531,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DragDropModule,
                         FormsModule,
                         FieldTypeSelectorComponent
-                    ], template: "<div class=\"form-block-card\">\r\n    <div class=\"form-block-card-header\">\r\n        <div>\r\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\"   (ngModelChange)=\"changeTitle($event)\">\r\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\r\n        </div>\r\n        <ui-button [tip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().id)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\r\n    </div>\r\n    <div\r\n        class=\"form-block-card-body\"\r\n        cdkDropList\r\n        [cdkDropListData]=\"block().fields\"\r\n        (cdkDropListDropped)=\"reorderFields($event)\">\r\n        \r\n        <!-- FIELDS -->\r\n        @for(edtField of block().fields; track edtField.id; let i = $index) {\r\n            <div\r\n                class=\"xfield-card\"\r\n                cdkDrag\r\n                [class.selected-field]=\"selectedFieldId === edtField.id\"\r\n                (click)=\"selectField(edtField)\">\r\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\r\n\r\n                <div class=\"xfield-card-icon\">\r\n                    <i [class]=\"edtField.field.icon\"></i> \r\n                </div>\r\n                <div class=\"xfield-card-body\">\r\n                    <b> {{edtField.fieldData.label}} \r\n                        @if(edtField.fieldData.visibilityRules) {\r\n                            <i class=\"branched-field ri-git-merge-line\"></i> \r\n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\r\n                        }\r\n                    </b>\r\n                    <p> {{edtField.field.label}} </p>\r\n                </div>\r\n                <div class=\"xfield-card-actions\">\r\n                    <ui-button (click)=\"deleteField(edtField.id, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\r\n                </div>\r\n            </div>\r\n\r\n        }\r\n\r\n    </div>\r\n    <div class=\"new-field\">\r\n        {{'form_builder.add_new_field' | uicTranslate}}\r\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\r\n    </div>\r\n</div>\r\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.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}\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 [tip]=\"'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> {{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}\n"] }]
         }], propDecorators: { selectedFieldId: [{
                 type: Input
             }] } });
 
 class UicUserFormbuilderComponent {
     modalService = inject(UicModalService);
-    // CONFIG
+    formTitle = 'Nuevo formulario';
     cols = 2;
-    editableBlocks = signal([{ id: 1, title: '', subtitle: '', fields: [] }]);
-    nextBlockId = 2;
+    readOnly = input(true);
+    editableBlocksInput = input([], { alias: 'editableBlocks' });
+    submitFormRequest = output();
+    nextBlockId = 1;
+    nextFieldId = 1;
+    editableBlocks = signal([]);
+    editingSnapshot = signal(null);
+    isReadOnly = signal(true);
     selectedField = signal(null);
+    previewSchema = computed(() => helperShowFormFromBuilder(this.editableBlocks(), this.cols));
     dependencyOptions = computed(() => {
         const currentSelected = this.selectedField();
         const options = this.editableBlocks()
             .flatMap(block => block.fields)
-            .filter(field => field.id !== currentSelected?.id)
+            .filter(field => field.code !== currentSelected?.code)
             .map(field => ({
-            id: field.id,
+            id: field.code,
             text: field.fieldData.label || field.fieldData.name
         }));
         return { fieldName: options };
     });
+    constructor() {
+        effect(() => {
+            const readOnly = this.readOnly();
+            this.isReadOnly.set(readOnly);
+            if (readOnly) {
+                this.editingSnapshot.set(null);
+            }
+        });
+        effect(() => {
+            const sourceBlocks = this.editableBlocksInput();
+            if (!this.isReadOnly() && this.editingSnapshot()) {
+                return;
+            }
+            this.editableBlocks.set(this.prepareBlocksForLocalState(sourceBlocks));
+        });
+        effect(() => {
+            const blocks = this.editableBlocks();
+            const hydratedBlocks = this.hydrateBlocks(blocks);
+            if (hydratedBlocks !== blocks) {
+                this.editableBlocks.set(hydratedBlocks);
+                return;
+            }
+            this.syncLocalCounters(blocks);
+            const selectedCode = this.selectedField()?.code;
+            if (!selectedCode)
+                return;
+            const selectedField = blocks
+                .flatMap(block => block.fields)
+                .find(field => field.code === selectedCode);
+            if (!selectedField) {
+                this.selectedField.set(null);
+                return;
+            }
+            if (selectedField !== this.selectedField()) {
+                this.selectedField.set(selectedField);
+            }
+        });
+    }
     addBlock() {
         const newBlockId = this.nextBlockId++;
         this.editableBlocks.update(blocks => [...blocks, {
-                id: newBlockId,
                 title: '',
+                order: blocks.length + 1,
+                code: `block_${newBlockId}`,
                 subtitle: '',
                 fields: []
             }]);
     }
-    deleteBlock(id) {
-        const removedBlock = this.editableBlocks().find(block => block.id === id);
-        if (removedBlock && this.selectedField() && removedBlock.fields.some(field => field.id === this.selectedField()?.id)) {
+    deleteBlock(code) {
+        const removedBlock = this.editableBlocks().find(block => block.code === code);
+        if (removedBlock && this.selectedField() && removedBlock.fields.some(field => field.code === this.selectedField()?.code)) {
             this.selectedField.set(null);
         }
-        this.editableBlocks.update(blocks => blocks.filter(block => block.id !== id));
+        this.editableBlocks.update(blocks => blocks.filter(block => block.code !== code));
+    }
+    addField(blockCode, newFieldType) {
+        const fieldCode = `field_${this.nextFieldId++}`;
+        const updatedField = {
+            code: fieldCode,
+            order: 0,
+            type: newFieldType.value,
+            field: newFieldType,
+            fieldData: {
+                name: fieldCode,
+                label: 'New field',
+                type: newFieldType.value
+            }
+        };
+        this.editableBlocks.update(blocks => blocks.map(block => block.code === blockCode
+            ? { ...block, fields: [...block.fields, updatedField] }
+            : block));
     }
     printForm() {
-        const formSchema = this.getFormSchema();
         this.modalService.openFloatingModal(FormPreviewComponent, {
-            data: { schema: formSchema },
+            data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.cols, true) },
             size: 'medium'
         });
     }
     submitForm() {
-        console.log('Form submitted with schema:');
-        console.log(this.getFormSchema());
+        const blocksWithOrderedFields = this.editableBlocks().map(block => ({
+            ...block,
+            fields: block.fields.map((field, index) => ({
+                ...field,
+                order: index + 1,
+                fieldData: this.removeNullProperties(field.fieldData)
+            }))
+        }));
+        this.editableBlocks.set(blocksWithOrderedFields);
+        this.isReadOnly.set(true);
+        this.editingSnapshot.set(null);
+        this.submitFormRequest.emit(blocksWithOrderedFields.map(block => ({
+            ...block,
+            fields: block.fields.map(({ field, ...restField }) => restField)
+        })));
+    }
+    enableEditMode() {
+        this.editingSnapshot.set(this.deepClone(this.editableBlocks()));
+        this.isReadOnly.set(false);
+    }
+    discardChanges() {
+        const snapshot = this.editingSnapshot();
+        if (!snapshot)
+            return;
+        this.editableBlocks.set(this.prepareBlocksForLocalState(snapshot));
+        this.selectedField.set(null);
+        this.editingSnapshot.set(null);
+        this.isReadOnly.set(true);
     }
     onBlockChange(index, updated) {
-        this.editableBlocks.update(blocks => blocks.map((b, i) => i === index ? updated : b));
+        this.editableBlocks.update(blocks => blocks.map((block, currentIndex) => currentIndex === index ? updated : block));
     }
     onFieldChange(updatedField) {
         const selected = this.selectedField();
         if (!selected)
             return;
-        const fieldId = selected.id;
+        const fieldCode = selected.code;
         let updatedSelected = null;
         this.editableBlocks.update(blocks => blocks.map(block => ({
             ...block,
             fields: block.fields.map(field => {
-                if (field.id !== fieldId)
+                if (field.code !== fieldCode)
                     return field;
-                const updated = { ...field, fieldData: updatedField };
+                const updated = {
+                    ...field,
+                    type: updatedField.type,
+                    fieldData: updatedField
+                };
                 updatedSelected = updated;
                 return updated;
             })
@@ -8575,48 +8696,86 @@ class UicUserFormbuilderComponent {
             this.selectedField.set(updatedSelected);
         }
     }
-    getFormSchema() {
-        return {
-            cols: this.cols,
-            blocks: this.mapEditableBlocksToBlocks()
-        };
+    prepareBlocksForLocalState(blocks) {
+        return this.hydrateBlocks(this.deepClone(blocks));
     }
-    mapEditableBlocksToBlocks() {
-        const fieldIdToName = new Map();
-        this.editableBlocks().forEach(block => {
-            block.fields.forEach(field => {
-                fieldIdToName.set(field.id, field.fieldData.name);
-            });
-        });
-        return this.editableBlocks().map(block => ({
-            title: block.title,
-            subtitle: block.subtitle,
-            fields: block.fields.map(f => {
-                const visibilityRules = f.fieldData.visibilityRules?.map(rule => ({
-                    ...rule,
-                    fieldName: fieldIdToName.get(rule.fieldName) ?? rule.fieldName
-                }));
+    syncLocalCounters(blocks) {
+        this.nextBlockId = this.getNextCodeId(blocks.map(block => block.code), 'block_');
+        this.nextFieldId = this.getNextCodeId(blocks.flatMap(block => block.fields.map(field => field.code)), 'field_');
+    }
+    getNextCodeId(codes, prefix) {
+        const maxId = codes.reduce((max, code) => {
+            if (!code.startsWith(prefix))
+                return max;
+            const value = Number(code.slice(prefix.length));
+            return Number.isNaN(value) ? max : Math.max(max, value);
+        }, 0);
+        return maxId + 1;
+    }
+    hydrateBlocks(blocks) {
+        let changed = false;
+        const hydratedBlocks = blocks.map(block => {
+            let blockChanged = false;
+            const hydratedFields = block.fields.map(field => {
+                if (field.field || !field.type)
+                    return field;
+                const fieldConfig = FIELDS_CONFIG.find(config => config.value === field.type);
+                if (!fieldConfig)
+                    return field;
+                changed = true;
+                blockChanged = true;
                 return {
-                    ...f.fieldData,
-                    visibilityRules: visibilityRules ?? f.fieldData.visibilityRules
+                    ...field,
+                    field: fieldConfig
                 };
-            })
-        }));
+            });
+            return blockChanged ? { ...block, fields: hydratedFields } : block;
+        });
+        return changed ? hydratedBlocks : blocks;
+    }
+    removeNullProperties(value) {
+        if (value === null) {
+            return value;
+        }
+        if (Array.isArray(value)) {
+            return value
+                .filter(item => item !== null)
+                .map(item => this.removeNullProperties(item));
+        }
+        if (typeof value === 'object' && value !== undefined) {
+            return Object.fromEntries(Object.entries(value)
+                .filter(([, entryValue]) => entryValue !== null)
+                .map(([key, entryValue]) => [key, this.removeNullProperties(entryValue)]));
+        }
+        return value;
+    }
+    deepClone(value) {
+        if (Array.isArray(value)) {
+            return value.map(item => this.deepClone(item));
+        }
+        if (value && typeof value === 'object') {
+            return Object.fromEntries(Object.entries(value).map(([key, entryValue]) => [key, this.deepClone(entryValue)]));
+        }
+        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", ngImport: i0, template: "<div class=\"formeditor\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            Creando nuevo formulario\r\n        </div>\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\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n    </div>\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                <ui-input label=\"Columnas\">\r\n                    <input [(ngModel)]=\"cols\">\r\n                </ui-input>\r\n                @for (block of editableBlocks(); track block.id; let i = $index) {\r\n                    <lib-block-editor \r\n                        [block]=\"block\"\r\n                        [selectedFieldId]=\"selectedField()?.id ?? null\"\r\n                        (blockChange)=\"onBlockChange(i, $event)\"\r\n                        (notifySelectedField)=\"selectedField.set($event)\"\r\n                        (deleteBlock)=\"deleteBlock(block.id)\">\r\n                    </lib-block-editor>\r\n                }\r\n                <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n            </div>\r\n        </div>\r\n        <!-- PROPERTIES -->\r\n        <div class=\"formeditor-properties\">\r\n            <h3>Propiedades</h3>\r\n            <div class=\"formeditor-properties-form\">\r\n                @if (selectedField()) {\r\n                    <lib-field-editor \r\n                        [config]=\"selectedField()!\"\r\n                        [options]=\"dependencyOptions()\"\r\n                        (fieldChange)=\"onFieldChange($event)\">\r\n                    </lib-field-editor>\r\n                }@else{\r\n                    <div class=\"no-selected-field\">\r\n                        <i class=\"ri-edit-box-line\"></i>\r\n                        <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.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", "deleteBlock", "notifySelectedField"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableBlocksInput: { classPropertyName: "editableBlocksInput", publicName: "editableBlocks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, 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        </div>\r\n        @if (isReadOnly()) {\n            <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\n        } @else {\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\n        }\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\n                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\n            </div>\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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}\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", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-user-formbuilder', imports: [
                         UicButtonComponent,
-                        UicInputComponent,
+                        UicFormWrapperComponent,
                         UicTranslatePipe,
                         FieldEditorComponent,
                         FormsModule,
                         BlockEditorComponent
-                    ], template: "<div class=\"formeditor\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            Creando nuevo formulario\r\n        </div>\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\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n    </div>\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                <ui-input label=\"Columnas\">\r\n                    <input [(ngModel)]=\"cols\">\r\n                </ui-input>\r\n                @for (block of editableBlocks(); track block.id; let i = $index) {\r\n                    <lib-block-editor \r\n                        [block]=\"block\"\r\n                        [selectedFieldId]=\"selectedField()?.id ?? null\"\r\n                        (blockChange)=\"onBlockChange(i, $event)\"\r\n                        (notifySelectedField)=\"selectedField.set($event)\"\r\n                        (deleteBlock)=\"deleteBlock(block.id)\">\r\n                    </lib-block-editor>\r\n                }\r\n                <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n            </div>\r\n        </div>\r\n        <!-- PROPERTIES -->\r\n        <div class=\"formeditor-properties\">\r\n            <h3>Propiedades</h3>\r\n            <div class=\"formeditor-properties-form\">\r\n                @if (selectedField()) {\r\n                    <lib-field-editor \r\n                        [config]=\"selectedField()!\"\r\n                        [options]=\"dependencyOptions()\"\r\n                        (fieldChange)=\"onFieldChange($event)\">\r\n                    </lib-field-editor>\r\n                }@else{\r\n                    <div class=\"no-selected-field\">\r\n                        <i class=\"ri-edit-box-line\"></i>\r\n                        <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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}\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        </div>\r\n        @if (isReadOnly()) {\n            <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\n        } @else {\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\n        }\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\n                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\n            </div>\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formTitle: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }] } });
 
 class RuleDefinirionComponent {
     data;
@@ -8789,6 +8948,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicRuleBuilderComponent {
     conditionsInitialized = false;
     emitConditionsOnInit = false;
+    emitRuleDefinitionOnInit = false;
+    conditionsEmitScheduled = false;
+    ruleDefinitionEmitScheduled = false;
     _conditions = [
         {
             id: 1,
@@ -8857,16 +9019,19 @@ class UicRuleBuilderComponent {
     set conditions(value) {
         this._conditions = Array.isArray(value) ? value.map(condition => ({ ...condition })) : [];
         const conditionsNormalized = this.refreshAvailableConditions();
-        const referencesUpdated = this.syncConditionReferencesWithPersistedConditions();
+        const syncResult = this.syncConditionsWithPersistedConditions();
         this.syncNextTemporalConditionId();
-        if (this.conditionsInitialized && conditionsNormalized) {
-            this.emitConditionsState();
+        if (this.conditionsInitialized && (conditionsNormalized || syncResult.conditionsCleaned)) {
+            this.scheduleConditionsStateEmit();
         }
-        if (!this.conditionsInitialized && conditionsNormalized) {
+        if (!this.conditionsInitialized && (conditionsNormalized || syncResult.conditionsCleaned)) {
             this.emitConditionsOnInit = true;
         }
-        if (this.conditionsInitialized && referencesUpdated) {
-            this.emitRuleDefinitionState();
+        if (this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.scheduleRuleDefinitionStateEmit();
+        }
+        if (!this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
         }
         this.conditionsInitialized = true;
     }
@@ -8887,7 +9052,20 @@ class UicRuleBuilderComponent {
         }
         this.externalRuleDefinition = normalizedValue;
         this.editorRules = this.getRulesFromDefinition(normalizedValue.definition);
+        const syncResult = this.syncConditionsWithPersistedConditions();
         this.syncNextTemporalConditionId();
+        if (this.conditionsInitialized && syncResult.conditionsCleaned) {
+            this.scheduleConditionsStateEmit();
+        }
+        if (this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.scheduleRuleDefinitionStateEmit();
+        }
+        if (!this.conditionsInitialized && syncResult.conditionsCleaned) {
+            this.emitConditionsOnInit = true;
+        }
+        if (!this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
+        }
     }
     get ruleDefinition() {
         return this.externalRuleDefinition;
@@ -8906,12 +9084,25 @@ class UicRuleBuilderComponent {
             this.emitConditionsOnInit = this.refreshAvailableConditions();
             this.conditionsInitialized = true;
         }
-        this.editorRules = this.getRulesFromDefinition(this.ruleDefinition.definition);
+        if (this.editorRules.length === 0 && this.ruleDefinition.definition.trim()) {
+            this.editorRules = this.getRulesFromDefinition(this.ruleDefinition.definition);
+        }
+        const syncResult = this.syncConditionsWithPersistedConditions();
         this.syncNextTemporalConditionId();
+        if (syncResult.conditionsCleaned) {
+            this.emitConditionsOnInit = true;
+        }
+        if (syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
+        }
         if (this.emitConditionsOnInit) {
-            this.emitConditionsState();
+            this.scheduleConditionsStateEmit();
             this.emitConditionsOnInit = false;
         }
+        if (this.emitRuleDefinitionOnInit) {
+            this.scheduleRuleDefinitionStateEmit();
+            this.emitRuleDefinitionOnInit = false;
+        }
     }
     addRule(rules = this.editorRules) {
         this.appendExpression(rules, this.createConditionRule());
@@ -8979,7 +9170,24 @@ class UicRuleBuilderComponent {
         return this.buildRuleOutput();
     }
     getConditionLabel(value) {
-        return this.resolveConditionLabel(value);
+        return this.resolveConditionLabel(value) ?? '';
+    }
+    isConditionLabelPending(value) {
+        if (value == null || value === '') {
+            return false;
+        }
+        return !this.hasConditionReference(value);
+    }
+    getConditionDetailTip(value) {
+        const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === String(value));
+        if (!matchedCondition) {
+            return '';
+        }
+        return [
+            matchedCondition.fieldName,
+            matchedCondition.operatorName,
+            matchedCondition.value
+        ].filter(Boolean).join(' ');
     }
     getOperatorLabel(value) {
         const normalizedValue = value === 'OR' ? 'OR' : 'AND';
@@ -9168,7 +9376,10 @@ class UicRuleBuilderComponent {
     }
     resolveConditionLabel(value) {
         const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === String(value));
-        return matchedCondition?.description ?? String(value ?? '');
+        return matchedCondition?.description ?? null;
+    }
+    hasConditionReference(value) {
+        return this.conditions.some(condition => String(this.getConditionReference(condition)) === String(value));
     }
     upsertCondition(condition) {
         const normalizedCondition = { ...condition };
@@ -9184,7 +9395,7 @@ class UicRuleBuilderComponent {
             this._conditions = [...this._conditions, normalizedCondition];
         }
         this.refreshAvailableConditions();
-        this.emitConditionsState();
+        this.scheduleConditionsStateEmit();
         return conditionReference;
     }
     buildRuleOutput() {
@@ -9212,6 +9423,26 @@ class UicRuleBuilderComponent {
     emitConditionsState() {
         this.conditionsChange.emit(this._conditions.map(condition => ({ ...condition })));
     }
+    scheduleRuleDefinitionStateEmit() {
+        if (this.ruleDefinitionEmitScheduled) {
+            return;
+        }
+        this.ruleDefinitionEmitScheduled = true;
+        queueMicrotask(() => {
+            this.ruleDefinitionEmitScheduled = false;
+            this.emitRuleDefinitionState();
+        });
+    }
+    scheduleConditionsStateEmit() {
+        if (this.conditionsEmitScheduled) {
+            return;
+        }
+        this.conditionsEmitScheduled = true;
+        queueMicrotask(() => {
+            this.conditionsEmitScheduled = false;
+            this.emitConditionsState();
+        });
+    }
     normalizeRuleBuilderValue(value) {
         if (!value) {
             return this.createEmptyRuleBuilderValue();
@@ -9251,14 +9482,27 @@ class UicRuleBuilderComponent {
         }, {});
         return changed;
     }
-    syncConditionReferencesWithPersistedConditions() {
+    syncConditionsWithPersistedConditions() {
         const persistedConditionsByTemporalId = new Map(this._conditions
             .filter(condition => condition.id !== 0 && !!condition.temporalId)
             .map(condition => [String(condition.temporalId), condition]));
         if (persistedConditionsByTemporalId.size === 0) {
-            return false;
+            return {
+                referencesUpdated: false,
+                conditionsCleaned: false
+            };
         }
-        return this.replaceConditionReferences(this.editorRules, persistedConditionsByTemporalId);
+        const referencesUpdated = this.replaceConditionReferences(this.editorRules, persistedConditionsByTemporalId);
+        const previousLength = this._conditions.length;
+        this._conditions = this._conditions.filter(condition => {
+            return condition.id !== 0
+                || !condition.temporalId
+                || !persistedConditionsByTemporalId.has(String(condition.temporalId));
+        });
+        return {
+            referencesUpdated,
+            conditionsCleaned: previousLength !== this._conditions.length
+        };
     }
     replaceConditionReferences(rules, persistedConditionsByTemporalId) {
         let updated = false;
@@ -9287,7 +9531,9 @@ class UicRuleBuilderComponent {
     }
     syncNextTemporalConditionId() {
         const references = [
-            ...this.conditions.map(condition => String(this.getConditionReference(condition))),
+            ...this.conditions
+                .flatMap(condition => [String(this.getConditionReference(condition)), String(condition.temporalId ?? '')])
+                .filter(reference => reference !== ''),
             ...this.collectConditionValues(this.editorRules)
         ];
         const nextId = references.reduce((maxId, reference) => {
@@ -9300,7 +9546,7 @@ class UicRuleBuilderComponent {
         this.nextTemporalConditionId = nextId + 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\" [class.condition-box-empty]=\"rule.value == null || rule.value === ''\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\n                        class=\"condition-box\"\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n                        @if (rule.value == null || rule.value === '') {\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\n                        } @else if (isConditionLabelPending(rule.value)) {\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                        } @else {\n                            {{ getConditionLabel(rule.value) }}\n                        }\n                    </div>\n                </div>\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n            </div>\n        }\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                    } @else {\n                        {{ getConditionLabel(rule.value) }}\n                    }\n                </div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
@@ -9310,7 +9556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicToolTipDirective,
                         UicTranslatePipe
-                    ], template: "<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\" [class.condition-box-empty]=\"rule.value == null || rule.value === ''\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"] }]
+                    ], template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\n                        class=\"condition-box\"\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n                        @if (rule.value == null || rule.value === '') {\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\n                        } @else if (isConditionLabelPending(rule.value)) {\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                        } @else {\n                            {{ getConditionLabel(rule.value) }}\n                        }\n                    </div>\n                </div>\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n            </div>\n        }\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                    } @else {\n                        {{ getConditionLabel(rule.value) }}\n                    }\n                </div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { conditions: [{
                 type: Input
             }], conditionOperators: [{
@@ -9360,5 +9606,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, 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, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperShowFormFromBuilder, helperTableMapDatoToColums, highlightRow, isMobile, provideUicTranslateConfig, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map