ui-core-abv 0.6.71 → 0.6.74

package/fesm2022/ui-core-abv.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input, output } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, Subscription } from 'rxjs';
+import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, isObservable, from, Subscription } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/cdk/portal';
@@ -470,6 +470,18 @@ const DICTIONARY_EN = {
             iaValidationPrompt: 'IA Validation Prompt',
             searchApi: 'Search API',
             searchApi_tip: 'URL to fetch search options',
+            optionsSourceKey: 'Options source',
+            optionsSourceKey_tip: 'Logical key registered by the consuming application',
+            optionsSourceIdField: 'Option ID field',
+            optionsSourceIdField_tip: 'Path used as the option id. Example: id',
+            optionsSourceTextField: 'Option text field',
+            optionsSourceTextField_tip: 'Path used as the option text. Example: name',
+            optionsSourceTextTemplate: 'Text template',
+            optionsSourceTextTemplate_tip: 'Example: {{name}} ({{id}})',
+            optionsSourceDependsOn: 'Depends on',
+            optionsSourceDependsOn_tip: 'Parent field identifier that triggers reloads',
+            optionsSourceParamName: 'Parameter name',
+            optionsSourceParamName_tip: 'Name used to send the dependent value',
             selectNullable_tip: 'Allows selecting an empty option',
             selectSearchEnabled_tip: 'Enables search among options',
             selectNullable: 'Allow empty option',
@@ -761,6 +773,18 @@ const DICTIONARY_ES = {
             iaValidation: 'Validación IA',
             iaValidationPrompt: 'Prompt de validación IA',
             searchApi_tip: 'URL para obtener opciones de búsqueda',
+            optionsSourceKey: 'Fuente de opciones',
+            optionsSourceKey_tip: 'Clave lógica registrada por la aplicación consumidora',
+            optionsSourceIdField: 'Campo ID de opción',
+            optionsSourceIdField_tip: 'Ruta del valor usado como id. Ejemplo: id',
+            optionsSourceTextField: 'Campo texto de opción',
+            optionsSourceTextField_tip: 'Ruta del valor usado como texto. Ejemplo: name',
+            optionsSourceTextTemplate: 'Plantilla de texto',
+            optionsSourceTextTemplate_tip: 'Ejemplo: {{name}} ({{id}})',
+            optionsSourceDependsOn: 'Depende de',
+            optionsSourceDependsOn_tip: 'Identificador del campo padre que dispara la recarga',
+            optionsSourceParamName: 'Nombre del parámetro',
+            optionsSourceParamName_tip: 'Nombre con el que se envía el valor dependiente',
             selectNullable_tip: 'Permite seleccionar una opción vacía',
             selectSearchEnabled_tip: 'Habilita búsqueda entre opciones',
             selectNullable: 'Permitir opción vacía',
@@ -4295,6 +4319,7 @@ class UicFormWrapperComponent {
     fields = [];
     cols = 2;
     externalData = {};
+    selectOptionsResolver;
     loading = false;
     disabled = false;
     showButtons = false;
@@ -4305,12 +4330,16 @@ class UicFormWrapperComponent {
     fileUidResolverFn;
     formSubmit = new EventEmitter();
     formChange = new EventEmitter();
+    optionsSourceError = new EventEmitter();
     formValueSub = null;
+    optionSourceSubs = new Map();
+    optionSourceDependencyValueByField = new Map();
     hasFocusedCurrentTrigger = false;
     ngOnInit() {
         this.syncEffectiveSchema();
         this.buildForm();
         this.updateExtenalData();
+        this.updateOptionsSources();
     }
     ngOnChanges(changes) {
         const sourceChanged = (changes['schema'] && !changes['schema'].firstChange) ||
@@ -4325,13 +4354,18 @@ class UicFormWrapperComponent {
         if (sourceChanged) {
             this.buildForm();
             this.updateExtenalData();
+            this.updateOptionsSources();
         }
         if (changes['externalData']) {
             this.updateExtenalData();
         }
+        if (changes['selectOptionsResolver'] && !changes['selectOptionsResolver'].firstChange) {
+            this.updateOptionsSources(true);
+        }
         if (changes['initialValues'] && !changes['initialValues'].firstChange) {
             this.buildForm();
             this.updateExtenalData();
+            this.updateOptionsSources();
         }
         const focusRequestChanged = (changes['focusFieldName'] && !changes['focusFieldName'].firstChange) ||
             (changes['focusFieldTrigger'] && !changes['focusFieldTrigger'].firstChange);
@@ -4343,6 +4377,7 @@ class UicFormWrapperComponent {
     ngOnDestroy() {
         this.formValueSub?.unsubscribe();
         this.formValueSub = null;
+        this.clearOptionSourceSubscriptions();
     }
     buildForm() {
         this.formValueSub?.unsubscribe();
@@ -4362,8 +4397,10 @@ class UicFormWrapperComponent {
         this.formValueSub = newForm.valueChanges.subscribe(() => {
             this.normalizeNumericControls(newForm, numericFields);
             this.handleFormChange();
+            this.updateDependentOptionsSources();
         });
         this.form = newForm;
+        this.optionSourceDependencyValueByField.clear();
         this.updateDisabledState();
         this.focusConfiguredField();
     }
@@ -4444,12 +4481,210 @@ class UicFormWrapperComponent {
     updateFieldOptions(block) {
         return block.fields.map(field => {
             if (field.type === 'select' || field.type === 'pool' || field.type === 'multyselect') {
+                if (this.hasUsableOptionsSource(field)) {
+                    return field;
+                }
                 const externalOptions = this.externalData?.[field.name];
                 return { ...field, options: Array.isArray(externalOptions) ? externalOptions : (field.options ?? []) };
             }
             return field;
         });
     }
+    updateOptionsSources(force = false) {
+        const fields = this.collectAllFields().filter(field => this.hasUsableOptionsSource(field));
+        const fieldNames = new Set(fields.map(field => field.name));
+        for (const fieldName of this.optionSourceSubs.keys()) {
+            if (!fieldNames.has(fieldName)) {
+                this.optionSourceSubs.get(fieldName)?.unsubscribe();
+                this.optionSourceSubs.delete(fieldName);
+                this.optionSourceDependencyValueByField.delete(fieldName);
+            }
+        }
+        fields.forEach(field => this.resolveOptionsSourceField(field, force));
+    }
+    updateDependentOptionsSources() {
+        const fields = this.collectAllFields().filter(field => {
+            const source = field.optionsSource;
+            return this.hasUsableOptionsSource(field) && !!source?.dependsOn;
+        });
+        fields.forEach(field => this.resolveOptionsSourceField(field));
+    }
+    resolveOptionsSourceField(field, force = false) {
+        const source = field.optionsSource;
+        if (!source?.key)
+            return;
+        if (!this.selectOptionsResolver) {
+            this.updateFieldOptionsState(field.name, {
+                options: field.options ?? [],
+                loading: false
+            });
+            return;
+        }
+        const values = this.toNestedValues(this.form?.getRawValue?.() ?? {});
+        const dependencyValue = source.dependsOn ? this.getValueByPath(values, source.dependsOn) : undefined;
+        const dependencyKey = source.dependsOn ? `${source.dependsOn}:${this.safeStringify(dependencyValue ?? null)}` : '__init__';
+        const previousDependencyKey = this.optionSourceDependencyValueByField.get(field.name);
+        if (!force && previousDependencyKey === dependencyKey) {
+            return;
+        }
+        this.optionSourceDependencyValueByField.set(field.name, dependencyKey);
+        if (source.dependsOn && (dependencyValue === null || dependencyValue === undefined || dependencyValue === '')) {
+            this.optionSourceSubs.get(field.name)?.unsubscribe();
+            this.optionSourceSubs.delete(field.name);
+            this.clearFieldValue(field);
+            this.updateFieldOptionsState(field.name, { options: [], loading: false });
+            return;
+        }
+        this.optionSourceSubs.get(field.name)?.unsubscribe();
+        this.updateFieldOptionsState(field.name, { loading: true });
+        let optionsResult;
+        try {
+            optionsResult = this.selectOptionsResolver(source, {
+                field,
+                values,
+                dependencyValue
+            });
+        }
+        catch (error) {
+            this.handleOptionsSourceError(field, source, error);
+            return;
+        }
+        const sub = this.toObservable(optionsResult).subscribe({
+            next: items => {
+                const options = this.mapOptionsSourceItems(items, source);
+                this.updateFieldOptionsState(field.name, { options, loading: false });
+                this.clearInvalidFieldValue(field.name, options);
+            },
+            error: error => this.handleOptionsSourceError(field, source, error),
+            complete: () => this.updateFieldOptionsState(field.name, { loading: false })
+        });
+        this.optionSourceSubs.set(field.name, sub);
+    }
+    handleOptionsSourceError(field, source, error) {
+        this.updateFieldOptionsState(field.name, { options: [], loading: false });
+        this.optionsSourceError.emit({ field, source, error });
+    }
+    toObservable(value) {
+        if (isObservable(value)) {
+            return value;
+        }
+        if (value instanceof Promise) {
+            return from(value);
+        }
+        return of(value ?? []);
+    }
+    mapOptionsSourceItems(items, source) {
+        if (!Array.isArray(items))
+            return [];
+        return items.map(item => this.mapOptionsSourceItem(item, source));
+    }
+    mapOptionsSourceItem(item, source) {
+        if (item && typeof item === 'object') {
+            const record = item;
+            const id = this.getValueByPath(record, source.idField?.trim() || 'id');
+            const fallbackText = this.getValueByPath(record, source.textField?.trim() || 'text');
+            const optionId = this.isValidOptionId(id)
+                ? id
+                : this.isValidOptionId(fallbackText)
+                    ? fallbackText
+                    : String(fallbackText ?? '');
+            return {
+                detail: typeof record['detail'] === 'string' ? record['detail'] : undefined,
+                icon: typeof record['icon'] === 'string' ? record['icon'] : undefined,
+                iconColor: typeof record['iconColor'] === 'string' ? record['iconColor'] : undefined,
+                id: optionId,
+                text: source.textTemplate
+                    ? this.renderOptionsSourceTemplate(source.textTemplate, record)
+                    : String(fallbackText ?? id ?? '')
+            };
+        }
+        return {
+            id: String(item ?? ''),
+            text: String(item ?? '')
+        };
+    }
+    renderOptionsSourceTemplate(template, item) {
+        return template.replace(/\{\{\s*([\w.]+)\s*\}\}/g, (_match, path) => {
+            const value = this.getValueByPath(item, path);
+            return value === null || value === undefined ? '' : String(value);
+        });
+    }
+    updateFieldOptionsState(fieldName, values) {
+        if (!this.effectiveSchema?.blocks?.length)
+            return;
+        for (const block of this.effectiveSchema.blocks) {
+            const index = block.fields.findIndex(field => field.name === fieldName);
+            if (index === -1)
+                continue;
+            const field = block.fields[index];
+            block.fields[index] = {
+                ...field,
+                ...(values.options !== undefined ? { options: values.options } : {}),
+                ...(values.loading !== undefined ? { loading: values.loading } : {})
+            };
+            block.fields = [...block.fields];
+            this.effectiveSchema.blocks = [...this.effectiveSchema.blocks];
+            return;
+        }
+    }
+    clearInvalidFieldValue(fieldName, options) {
+        const control = this.getFieldControl(fieldName);
+        if (!control)
+            return;
+        const currentValue = control.value;
+        if (currentValue === null || currentValue === undefined || currentValue === '')
+            return;
+        if (Array.isArray(currentValue)) {
+            const validIds = new Set(options.map(option => option.id));
+            const filteredValue = currentValue.filter(value => validIds.has(value));
+            if (filteredValue.length !== currentValue.length) {
+                control.setValue(filteredValue, { emitEvent: false });
+                this.handleFormChange();
+            }
+            return;
+        }
+        if (!options.some(option => option.id === currentValue)) {
+            control.setValue(null, { emitEvent: false });
+            this.handleFormChange();
+        }
+    }
+    clearFieldValue(field) {
+        const control = this.getFieldControl(field.name);
+        if (!control)
+            return;
+        const blankValue = this.blankValue(field);
+        if (control.value !== blankValue) {
+            control.setValue(blankValue, { emitEvent: false });
+            this.handleFormChange();
+        }
+    }
+    hasUsableOptionsSource(field) {
+        return this.supportsOptions(field) && !!field.optionsSource?.key?.trim();
+    }
+    supportsOptions(field) {
+        return field.type === 'select' || field.type === 'pool' || field.type === 'multyselect' || field.type === 'radio';
+    }
+    isValidOptionId(value) {
+        return typeof value === 'string' || typeof value === 'number' || value === null;
+    }
+    getValueByPath(source, path) {
+        if (!path)
+            return undefined;
+        return path.split('.').reduce((current, key) => current?.[key], source);
+    }
+    safeStringify(value) {
+        try {
+            return JSON.stringify(value);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    clearOptionSourceSubscriptions() {
+        this.optionSourceSubs.forEach(sub => sub.unsubscribe());
+        this.optionSourceSubs.clear();
+        this.optionSourceDependencyValueByField.clear();
+    }
     collectAllFields() {
         return (this.effectiveSchema?.blocks ?? []).flatMap(block => block.fields ?? []);
     }
@@ -4705,7 +4940,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", focusFieldName: "focusFieldName", focusFieldTrigger: "focusFieldTrigger", fileUidResolverFn: "fileUidResolverFn" }, 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\n          [cols]=\"effectiveSchema.cols\"\n          [disabled]=\"disabled\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [fields]=\"block.fields\"\n          [form]=\"form\">\n        </ui-dynamic-form>\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", fields: "fields", cols: "cols", externalData: "externalData", selectOptionsResolver: "selectOptionsResolver", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues", focusFieldName: "focusFieldName", focusFieldTrigger: "focusFieldTrigger", fileUidResolverFn: "fileUidResolverFn" }, outputs: { formSubmit: "formSubmit", formChange: "formChange", optionsSourceError: "optionsSourceError" }, providers: [UicFormStateService], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of effectiveSchema.blocks; track $index) {\r\n    \r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (block.subtitle){\r\n          <div class=\"block-subtitle\">{{ block.subtitle }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"effectiveSchema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\n          [cols]=\"effectiveSchema.cols\"\n          [disabled]=\"disabled\"\n          [fileUidResolverFn]=\"fileUidResolverFn\"\n          [fields]=\"block.fields\"\n          [form]=\"form\">\n        </ui-dynamic-form>\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">{{'common.clear' | uicTranslate}}</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">{{'common.save' | uicTranslate}}</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1rem 0;color:var(--grey-950)}.block-subtitle{font-size:1.25rem;font-weight:600;line-height:calc(1.25rem + 4px);margin:.75rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "voiceToTextSilenceMs", "cols", "fileUidResolverFn"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
@@ -4724,6 +4959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], externalData: [{
                 type: Input
+            }], selectOptionsResolver: [{
+                type: Input
             }], loading: [{
                 type: Input
             }], disabled: [{
@@ -4744,6 +4981,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], formChange: [{
                 type: Output
+            }], optionsSourceError: [{
+                type: Output
             }] } });
 
 class UicStepTabsComponent {
@@ -4855,7 +5094,7 @@ class UicStepsFormComponent {
         return this.currentIdx === this.steps.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n    </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { 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", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >{{'step_form.back' | uicTranslate}}</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?('step_form.submit' | uicTranslate):('step_form.next' | uicTranslate)}}</ui-button>\r\n    </div>\r\n}\r\n", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
             type: Component,
@@ -6069,9 +6308,16 @@ function mapEditableBlocksToBlocks(blocks, editable) {
                 ...rule,
                 fieldName: fieldCodeToName.get(rule.fieldName) ?? rule.fieldName
             }));
+            const optionsSource = field.fieldData.optionsSource?.dependsOn
+                ? {
+                    ...field.fieldData.optionsSource,
+                    dependsOn: fieldCodeToName.get(field.fieldData.optionsSource.dependsOn) ?? field.fieldData.optionsSource.dependsOn
+                }
+                : field.fieldData.optionsSource;
             return {
                 ...field.fieldData,
                 disabled: !editable,
+                optionsSource,
                 visibilityRules: visibilityRules ?? field.fieldData.visibilityRules
             };
         })
@@ -8263,6 +8509,108 @@ const EXTRA_FORM_FIELDS = [
         tip: 'form_builder.extra.searchApi_tip',
         type: 'text'
     },
+    {
+        name: 'optionsSource.key',
+        label: 'form_builder.extra.optionsSourceKey',
+        internalIcon: 'ri-database-2-line',
+        tip: 'form_builder.extra.optionsSourceKey_tip',
+        type: 'text'
+    },
+    {
+        name: 'optionsSource.idField',
+        label: 'form_builder.extra.optionsSourceIdField',
+        internalIcon: 'ri-key-line',
+        tip: 'form_builder.extra.optionsSourceIdField_tip',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: ''
+            },
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: null
+            }
+        ]
+    },
+    {
+        name: 'optionsSource.textField',
+        label: 'form_builder.extra.optionsSourceTextField',
+        internalIcon: 'ri-text',
+        tip: 'form_builder.extra.optionsSourceTextField_tip',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: ''
+            },
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: null
+            }
+        ]
+    },
+    {
+        name: 'optionsSource.textTemplate',
+        label: 'form_builder.extra.optionsSourceTextTemplate',
+        internalIcon: 'ri-braces-line',
+        tip: 'form_builder.extra.optionsSourceTextTemplate_tip',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: ''
+            },
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: null
+            }
+        ]
+    },
+    {
+        name: 'optionsSource.dependsOn',
+        label: 'form_builder.extra.optionsSourceDependsOn',
+        internalIcon: 'ri-git-branch-line',
+        tip: 'form_builder.extra.optionsSourceDependsOn_tip',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: ''
+            },
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: null
+            }
+        ]
+    },
+    {
+        name: 'optionsSource.paramName',
+        label: 'form_builder.extra.optionsSourceParamName',
+        internalIcon: 'ri-code-line',
+        tip: 'form_builder.extra.optionsSourceParamName_tip',
+        type: 'text',
+        visibilityRules: [
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: ''
+            },
+            {
+                fieldName: 'optionsSource.key',
+                operator: 'notEquals',
+                value: null
+            }
+        ]
+    },
     {
         name: 'iaValidation',
         label: 'form_builder.extra.iaValidation',
@@ -8520,19 +8868,21 @@ const BRANCH_FORM_FIELDS = [
 class FormPreviewComponent {
     data;
     schema = { cols: 2, blocks: [] };
+    selectOptionsResolver;
     constructor(data) {
         this.data = data;
         this.schema = data.schema;
+        this.selectOptionsResolver = data.selectOptionsResolver;
     }
     save(fr) {
         console.log(fr.form);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \r\n    [schema]=\"schema\" \r\n    [showButtons]=\"true\"\r\n    (formSubmit)=\"save($event)\">\r\n</ui-form-wrapper>\r\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormPreviewComponent, isStandalone: true, selector: "lib-form-preview", ngImport: i0, template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [showButtons]=\"true\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n", styles: [""], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \r\n    [schema]=\"schema\" \r\n    [showButtons]=\"true\"\r\n    (formSubmit)=\"save($event)\">\r\n</ui-form-wrapper>\r\n" }]
+            args: [{ selector: 'lib-form-preview', imports: [UicFormWrapperComponent], template: "<ui-form-wrapper \n    [schema]=\"schema\" \n    [selectOptionsResolver]=\"selectOptionsResolver\"\n    [showButtons]=\"true\"\n    (formSubmit)=\"save($event)\">\n</ui-form-wrapper>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -8574,6 +8924,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+const OPTIONS_SOURCE_FIELD_NAMES = [
+    'optionsSource.key',
+    'optionsSource.idField',
+    'optionsSource.textField',
+    'optionsSource.textTemplate',
+    'optionsSource.dependsOn',
+    'optionsSource.paramName'
+];
 class FieldEditorComponent {
     translateService = inject(UicTranslateService);
     elementRef = inject(ElementRef);
@@ -8582,6 +8940,7 @@ class FieldEditorComponent {
         const fieldType = this.fieldType();
         return !!fieldType?.properties.includes('options');
     });
+    hasExternalOptionsSource = computed(() => !!this.localField().optionsSource?.key);
     config = input.required();
     focusRequiredField = input(false);
     options = input({});
@@ -8590,6 +8949,7 @@ class FieldEditorComponent {
     localField = signal({ name: '', type: 'text' });
     /* FORM FIELDS */
     requiredFields = this.buildRequiredFields();
+    optionsSourceFields = computed(() => this.buildOptionsSourceFields());
     advancedFields = computed(() => (this.buildAdvancedBlocks()));
     styleFields = computed(() => (this.buildDesignBlocks()));
     branchFields = this.buildBranchFields();
@@ -8735,6 +9095,28 @@ class FieldEditorComponent {
                 tip: field.tip ? this.translateService.translate(field.tip) : field.tip
             }))];
     }
+    buildOptionsSourceFields() {
+        return EXTRA_FORM_FIELDS
+            .filter(field => OPTIONS_SOURCE_FIELD_NAMES.includes(field.name))
+            .map(field => ({
+            ...this.prepareOptionsSourceField(field),
+            label: this.translateService.translate(field.label ?? ''),
+            placeholder: field.placeholder ? this.translateService.translate(field.placeholder) : this.translateService.translate(field.label ?? ''),
+            tip: field.tip ? this.translateService.translate(field.tip) : field.tip
+        }));
+    }
+    prepareOptionsSourceField(field) {
+        const options = this.options()[field.name];
+        if ((field.name === 'optionsSource.key' || field.name === 'optionsSource.dependsOn') && options?.length) {
+            return {
+                ...field,
+                type: 'select',
+                options,
+                selectNullable: true
+            };
+        }
+        return field;
+    }
     buildBranchFields() {
         return BRANCH_FORM_FIELDS.map(field => ({
             ...field,
@@ -8743,7 +9125,7 @@ class FieldEditorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-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", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], 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 }, focusRequiredField: { classPropertyName: "focusRequiredField", publicName: "focusRequiredField", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (!hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
             type: Component,
@@ -8752,7 +9134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-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"] }]
+                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [focusFieldName]=\"focusRequiredField() ? 'label' : null\"\n        [focusFieldTrigger]=\"focusRequiredField() ? config().code : null\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-form-wrapper\n            [fields]=\"optionsSourceFields()\"\n            [initialValues]=\"initialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\"\n            (formChange)=\"updateFieldValues($event)\">\n        </ui-form-wrapper>\n        @if (!hasExternalOptionsSource()) {\n            <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n        }\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>\n", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
@@ -8831,6 +9213,8 @@ class UicUserFormbuilderComponent {
     translateService = inject(UicTranslateService);
     disabled = false;
     formTitle = 'Nuevo formulario';
+    optionSources = [];
+    selectOptionsResolver;
     readOnly = input(true);
     editableFormInput = input({ cols: 2, blocks: [] }, { alias: 'editableForm' });
     submitFormRequest = output();
@@ -8849,14 +9233,18 @@ class UicUserFormbuilderComponent {
     resizeStartWidth = 0;
     dependencyOptions = computed(() => {
         const currentSelected = this.selectedField();
-        const options = this.editableBlocks()
+        const fieldOptions = this.editableBlocks()
             .flatMap(block => block.fields)
             .filter(field => field.code !== currentSelected?.code)
             .map(field => ({
             id: field.code,
             text: field.fieldData.label || field.fieldData.name
         }));
-        return { fieldName: options };
+        return {
+            fieldName: fieldOptions,
+            'optionsSource.key': this.optionSources,
+            'optionsSource.dependsOn': fieldOptions
+        };
     });
     constructor() {
         effect(() => {
@@ -8955,7 +9343,10 @@ class UicUserFormbuilderComponent {
     }
     printForm() {
         this.modalService.openFloatingModal(FormPreviewComponent, {
-            data: { schema: helperShowFormFromBuilder(this.editableBlocks(), this.editableCols(), true) },
+            data: {
+                schema: helperShowFormFromBuilder(this.editableBlocks(), this.editableCols(), true),
+                selectOptionsResolver: this.selectOptionsResolver
+            },
             size: 'medium'
         });
     }
@@ -8972,7 +9363,7 @@ class UicUserFormbuilderComponent {
             fields: block.fields.map((field, index) => ({
                 ...field,
                 order: index + 1,
-                fieldData: this.removeNullProperties(field.fieldData)
+                fieldData: this.prepareFieldDataForSubmit(field.fieldData)
             }))
         }));
         this.editableBlocks.set(blocksWithOrderedFields);
@@ -9129,6 +9520,23 @@ class UicUserFormbuilderComponent {
         }
         return value;
     }
+    prepareFieldDataForSubmit(fieldData) {
+        const cleanFieldData = this.removeNullProperties(fieldData);
+        const optionsSource = cleanFieldData.optionsSource;
+        if (!optionsSource) {
+            return cleanFieldData;
+        }
+        const cleanOptionsSource = Object.fromEntries(Object.entries(optionsSource)
+            .filter(([, value]) => value !== null && value !== undefined && value !== ''));
+        if (!cleanOptionsSource['key']) {
+            const { optionsSource: _optionsSource, ...restFieldData } = cleanFieldData;
+            return restFieldData;
+        }
+        return {
+            ...cleanFieldData,
+            optionsSource: cleanOptionsSource
+        };
+    }
     deepClone(value) {
         if (Array.isArray(value)) {
             return value.map(item => this.deepClone(item));
@@ -9139,7 +9547,7 @@ class UicUserFormbuilderComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            {{formTitle}} \r\n            \r\n            <div class=\"cols-selector\"> \r\n                @if (isReadOnly()) {\r\n                    {{editableCols()}}\r\n                }@else {\r\n                    <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                }\r\n                col(s)</div>\r\n        </div>\r\n        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\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", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicUserFormbuilderComponent, isStandalone: true, selector: "ui-user-formbuilder", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, formTitle: { classPropertyName: "formTitle", publicName: "formTitle", isSignal: false, isRequired: false, transformFunction: null }, optionSources: { classPropertyName: "optionSources", publicName: "optionSources", isSignal: false, isRequired: false, transformFunction: null }, selectOptionsResolver: { classPropertyName: "selectOptionsResolver", publicName: "selectOptionsResolver", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, editableFormInput: { classPropertyName: "editableFormInput", publicName: "editableForm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitFormRequest: "submitFormRequest" }, host: { listeners: { "document:mousemove": "onPropertiesResize($event)", "document:mouseup": "stopPropertiesResize()" } }, ngImport: i0, template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            {{formTitle}} \r\n            \r\n            <div class=\"cols-selector\"> \r\n                @if (isReadOnly()) {\r\n                    {{editableCols()}}\r\n                }@else {\r\n                    <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                }\r\n                col(s)</div>\r\n        </div>\r\n        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "focusRequiredField", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BlockEditorComponent, selector: "lib-block-editor", inputs: ["block", "selectedFieldId"], outputs: ["blockChange", "addFieldRequest", "deleteBlock", "notifySelectedField"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicUserFormbuilderComponent, decorators: [{
             type: Component,
@@ -9151,11 +9559,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         BlockEditorComponent,
                         UicSelectComponent
-                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            {{formTitle}} \r\n            \r\n            <div class=\"cols-selector\"> \r\n                @if (isReadOnly()) {\r\n                    {{editableCols()}}\r\n                }@else {\r\n                    <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                }\r\n                col(s)</div>\r\n        </div>\r\n        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \r\n                    [schema]=\"previewSchema()\"\r\n                    [showButtons]=\"false\">\r\n                </ui-form-wrapper>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"] }]
+                    ], template: "<div class=\"formeditor\" [class.focused]=\"!isReadOnly()\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            {{formTitle}} \r\n            \r\n            <div class=\"cols-selector\"> \r\n                @if (isReadOnly()) {\r\n                    {{editableCols()}}\r\n                }@else {\r\n                    <ui-select  [options]=\"[{id: 1, text: '1'}, {id: 2, text: '2'}, {id: 3, text: '3'}, {id: 4, text: '4'}]\" [ngModel]=\"editableCols()\" (ngModelChange)=\"editableCols.set($event)\"></ui-select> \r\n                }\r\n                col(s)</div>\r\n        </div>\r\n        @if (isReadOnly()) {\r\n            @if (!disabled) {\r\n                <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\r\n            }\r\n        } @else {\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n            <ui-button color=\"black\" type=\"bordered\" icon=\"ri-close-line\" text=\"Descartar cambios\" (click)=\"discardChanges()\"></ui-button>\r\n            <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n        }\r\n    </div>\r\n        @if (!isReadOnly()) {\r\n        <div class=\"formeditor-body\">\r\n    \r\n            <!-- BLOCKS -->\r\n            <div class=\"formeditor-overflow\">\r\n                <div class=\"formeditor-workarea\">\r\n                    @for (block of editableBlocks(); track block.code; let i = $index) {\r\n                        <lib-block-editor \r\n                            [block]=\"block\"\r\n                            [selectedFieldId]=\"selectedField()?.code ?? null\"\n                            (blockChange)=\"onBlockChange(i, $event)\"\n                            (addFieldRequest)=\"addField(block.code, $event)\"\n                            (notifySelectedField)=\"selectField($event)\"\n                            (deleteBlock)=\"deleteBlock($event)\">\n                        </lib-block-editor>\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\" [style.width.px]=\"propertiesWidth()\">\n                <div\n                    class=\"formeditor-properties-resize\"\n                    (mousedown)=\"startPropertiesResize($event)\">\n                </div>\n                <h3>Propiedades</h3>\n                <div class=\"formeditor-properties-form\">\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \n                            [config]=\"selectedField()!\"\n                            [focusRequiredField]=\"focusNewFieldCode() === selectedField()?.code\"\n                            [options]=\"dependencyOptions()\"\n                            (fieldChange)=\"onFieldChange($event)\">\n                        </lib-field-editor>\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\r\n                <ui-form-wrapper \n                    [schema]=\"previewSchema()\"\n                    [selectOptionsResolver]=\"selectOptionsResolver\"\n                    [showButtons]=\"false\">\n                </ui-form-wrapper>\n            </div>\r\n        }\r\n    </div>\r\n\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px;min-height:0}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto;min-width:0}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;flex:0 0 auto;display:flex;flex-direction:column;position:relative;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px;min-height:0;min-width:250px;max-width:600px}.formeditor-properties-resize{position:absolute;top:0;bottom:0;left:-6px;width:10px;cursor:col-resize;z-index:1}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto;flex:1 1 auto;min-height:0}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.cols-selector{margin-left:8px;padding-left:8px;border-left:solid 1px var(--grey-400);display:inline-flex;align-items:center;gap:5px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], formTitle: [{
                 type: Input
+            }], optionSources: [{
+                type: Input
+            }], selectOptionsResolver: [{
+                type: Input
             }], onPropertiesResize: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
@@ -9347,7 +9759,7 @@ class RuleDefinirionComponent {
         return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, deps: [{ token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper \n        (formChange)=\"updateFormNewRule($event)\"\n        (formSubmit)=\"createAndSelectRule($event)\" \n        [initialValues]=\"initialValues\"\n        [fields]=\"fields\" \n        [cols]=\"2\"></ui-form-wrapper>\n    <div class=\"condition-btns\">\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n    </div>\n} @else {\n    <div class=\"condition-searcher\">\n        <ui-input>\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n        </ui-input>\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n    </div>\n\n    @if (paginatedConditions.length > 0) {\n        @for (condition of paginatedConditions; track $index) {\n            <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\n                <div style=\"flex: 1 1;\">\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n                    @if (customNamesEnabled) {\n                        <div class=\"condition-body\">\n                            <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n                            <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n                            <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n                        </div>\n                    }\n                </div>\n                @if (!isSelected(condition)) {\n                    <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n                }\n            </div>\n        }\n    } @else {\n        <div class=\"condition\">\n            <div class=\"condition-emptytext\">\n                {{ 'rule_builder.definition.no_results' | uicTranslate }}\n            </div>\n        </div>\n    }\n\n    <div class=\"condition-pagination\">\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n    </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RuleDefinirionComponent, isStandalone: true, selector: "lib-rule-definirion", ngImport: i0, template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper \n        (formChange)=\"updateFormNewRule($event)\"\n        (formSubmit)=\"createAndSelectRule($event)\" \n        [initialValues]=\"initialValues\"\n        [fields]=\"fields\" \n        [cols]=\"2\"></ui-form-wrapper>\n    <div class=\"condition-btns\">\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\n    </div>\n} @else {\n    <div class=\"condition-searcher\">\n        <ui-input>\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\n        </ui-input>\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\n    </div>\n\n    @if (paginatedConditions.length > 0) {\n        @for (condition of paginatedConditions; track $index) {\n            <div class=\"condition\" [class.condition-selected]=\"isSelected(condition)\">\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\n                <div style=\"flex: 1 1;\">\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span></div>\n                    @if (customNamesEnabled) {\n                        <div class=\"condition-body\">\n                            <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\n                            <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\n                            <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\n                        </div>\n                    }\n                </div>\n                @if (!isSelected(condition)) {\n                    <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\n                }\n            </div>\n        }\n    } @else {\n        <div class=\"condition\">\n            <div class=\"condition-emptytext\">\n                {{ 'rule_builder.definition.no_results' | uicTranslate }}\n            </div>\n        </div>\n    }\n\n    <div class=\"condition-pagination\">\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\n    </div>\n}\n", styles: [".condition{border:solid 1px var(--grey-300);border-radius:10px;background-color:var(--grey-50);padding:6px;margin-bottom:4px;display:flex;align-items:center;gap:10px}.condition-emptytext{font-size:12px;text-align:center;color:var(--grey-400);padding:10px;width:100%}.condition i{color:var(--blue-600)}.condition-selected{border-color:var(--blue-500);background:linear-gradient(135deg,var(--blue-50) 0%,#eef6ff 100%);box-shadow:inset 0 0 0 1px #2563eb1f}.condition-selected .condition-title{color:var(--blue-800)}.condition-selected .condition-body,.condition-selected i{color:var(--blue-700)}.condition-title{font-size:14px;font-weight:500;line-height:16px}.condition-body{color:var(--grey-500);display:flex;gap:5px;font-size:12px}.condition-searcher{display:flex;gap:25px;margin-bottom:10px}.condition-pagination{margin-top:15px;display:flex;font-size:14px;align-items:center;justify-content:space-between}.condition-btns{padding-top:10px;border-top:solid 1px var(--grey-200);display:flex;justify-content:space-between}\n"], dependencies: [{ 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: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "selectOptionsResolver", "loading", "disabled", "showButtons", "fillSelects", "initialValues", "focusFieldName", "focusFieldTrigger", "fileUidResolverFn"], outputs: ["formSubmit", "formChange", "optionsSourceError"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
             type: Component,