ui-core-abv 0.6.38 → 0.6.42

package/fesm2022/ui-core-abv.mjs

@@ -307,21 +307,21 @@ const DICTIONARY_EN = {
         column_name_must_be_unique: 'Column name must be unique',
     },
     rule_builder: {
-        title: 'Condition',
-        add_rule: 'Rule',
-        add_rule_tip: 'Add rule',
+        title: 'Rule',
+        add_rule: 'Condition',
+        add_rule_tip: 'Add condition',
         add_group: 'Group',
         add_group_tip: 'Add group',
         reset: 'Reset',
         reset_tip: 'Discard unsaved changes',
-        save: 'Save',
+        save: 'Save rule',
         save_tip: 'Save built rule',
-        delete_rule_tip: 'Delete rule',
+        delete_rule_tip: 'Delete condition',
         delete_group_tip: 'Delete group',
         toggle_operator_tip: 'Click to change operator',
-        no_rules: 'No rules defined',
-        rules_management: 'Select rule',
-        edit: 'Edit',
+        no_rules: 'No conditions added',
+        rules_management: 'Select condition',
+        edit: 'Edit rule',
         edit_tip: 'Edit rule',
         edit_condition_tip: 'Click to edit condition',
         select_condition: '- select condition -',
@@ -334,9 +334,9 @@ const DICTIONARY_EN = {
         },
         definition: {
             cancel_and_back: 'Cancel and go back',
-            create_and_select: 'Create and select',
+            create_and_select: 'Create and select condition',
             search_placeholder: 'Search condition',
-            new_rule: 'New rule',
+            new_rule: 'New condition',
             no_results: 'No conditions found',
             previous: 'Previous',
             next: 'Next',
@@ -594,20 +594,20 @@ const DICTIONARY_ES = {
         column_name_must_be_unique: 'El nombre de la columna debe ser único',
     },
     rule_builder: {
-        title: 'Condición',
-        add_rule: 'Regla',
-        add_rule_tip: 'Agregar regla',
+        title: 'Regla',
+        add_rule: 'Condición',
+        add_rule_tip: 'Agregar condición',
         add_group: 'Grupo',
         add_group_tip: 'Agregar grupo',
-        reset: 'Reiniciar',
+        reset: 'Descartar',
         reset_tip: 'Descartar cambios no guardados',
         save: 'Guardar regla',
         save_tip: 'Guardar regla construida',
-        delete_rule_tip: 'Eliminar regla',
+        delete_rule_tip: 'Eliminar condición',
         delete_group_tip: 'Eliminar grupo',
         toggle_operator_tip: 'Click para cambiar de operador',
-        no_rules: 'No hay reglas definidas',
-        rules_management: 'Seleccionar reglas',
+        no_rules: 'No hay condiciones agregadas',
+        rules_management: 'Seleccionar condición',
         edit: 'Editar regla',
         edit_tip: 'Editar regla',
         edit_condition_tip: 'Click para editar la condición',
@@ -621,9 +621,9 @@ const DICTIONARY_ES = {
         },
         definition: {
             cancel_and_back: 'Cancelar y volver',
-            create_and_select: 'Crear y seleccionar',
+            create_and_select: 'Crear y seleccionar condición',
             search_placeholder: 'Buscar condición',
-            new_rule: 'Nueva regla',
+            new_rule: 'Nueva condición',
             no_results: 'No se encontraron condiciones',
             previous: 'Anterior',
             next: 'Siguiente',
@@ -8623,6 +8623,7 @@ class RuleDefinirionComponent {
     newRule = false;
     fields;
     conditions = [];
+    selectedConditionReference = null;
     searchTerm = '';
     currentPage = 1;
     pageSize = 5;
@@ -8632,6 +8633,9 @@ class RuleDefinirionComponent {
     constructor(data) {
         this.data = data;
         this.conditions = data.conditions;
+        this.selectedConditionReference = data.selectedConditionReference == null
+            ? null
+            : String(data.selectedConditionReference);
         this.fields = this.buildFields();
         this.languageSubscription = this.translate.language$.subscribe(() => {
             this.fields = this.buildFields();
@@ -8642,15 +8646,19 @@ class RuleDefinirionComponent {
     }
     get filteredConditions() {
         const normalizedSearch = this.normalizeText(this.searchTerm);
-        if (!normalizedSearch) {
-            return this.conditions;
-        }
-        return this.conditions.filter(condition => this.normalizeText(condition.description).includes(normalizedSearch) ||
-            this.normalizeText(condition.fieldName).includes(normalizedSearch) ||
-            this.normalizeText(condition.fieldCode).includes(normalizedSearch) ||
-            this.normalizeText(condition.operatorName).includes(normalizedSearch) ||
-            this.normalizeText(condition.operatorCode).includes(normalizedSearch) ||
-            this.normalizeText(condition.value).includes(normalizedSearch));
+        const conditions = !normalizedSearch
+            ? this.conditions
+            : this.conditions.filter(condition => this.normalizeText(condition.description).includes(normalizedSearch) ||
+                this.normalizeText(condition.fieldName).includes(normalizedSearch) ||
+                this.normalizeText(condition.fieldCode).includes(normalizedSearch) ||
+                this.normalizeText(condition.operatorName).includes(normalizedSearch) ||
+                this.normalizeText(condition.operatorCode).includes(normalizedSearch) ||
+                this.normalizeText(condition.value).includes(normalizedSearch));
+        return [...conditions].sort((left, right) => {
+            const leftSelected = this.isSelected(left) ? 1 : 0;
+            const rightSelected = this.isSelected(right) ? 1 : 0;
+            return rightSelected - leftSelected;
+        });
     }
     get paginatedConditions() {
         const start = (this.currentPage - 1) * this.pageSize;
@@ -8699,6 +8707,9 @@ class RuleDefinirionComponent {
     select(condition) {
         this.ref.closeFloating(condition);
     }
+    isSelected(condition) {
+        return this.selectedConditionReference === String(this.getConditionReference(condition));
+    }
     highlightSearch(value) {
         const text = String(value ?? '');
         const query = this.searchTerm.trim();
@@ -8755,8 +8766,11 @@ class RuleDefinirionComponent {
             .replace(/"/g, '"')
             .replace(/'/g, ''');
     }
+    getConditionReference(condition) {
+        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 (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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\">\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                    <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                </div>\n                <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\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-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"], 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 (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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                    <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                </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"], 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
             type: Component,
@@ -8766,14 +8780,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicInputComponent,
                         UicButtonComponent,
                         UicTranslatePipe
-                    ], template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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\">\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                    <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                </div>\n                <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\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-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"] }]
+                    ], template: "\n@if (newRule) {\n    <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></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                    <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                </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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
                 }] }] });
 
 class UicRuleBuilderComponent {
-    conditions = [
+    conditionsInitialized = false;
+    emitConditionsOnInit = false;
+    emitRuleDefinitionOnInit = false;
+    conditionsEmitScheduled = false;
+    ruleDefinitionEmitScheduled = false;
+    _conditions = [
         {
             id: 1,
             description: 'Mayores de edad',
@@ -8838,25 +8857,63 @@ class UicRuleBuilderComponent {
             value: '18',
         }
     ];
-    conditionOperators = [
-        { id: 'equal', text: 'Igual que' },
-        { id: 'not_equal', text: 'Distinto de' },
-        { id: 'greater_than', text: 'Mayor que' },
-        { id: 'less_than', text: 'Menor que' },
-    ];
-    conditionFields = [
-        { id: 'name', text: 'Nombre' },
-        { id: 'age', text: 'Edad' },
-        { id: 'country', text: 'Pais' },
-    ];
-    availableConditions = [];
+    set conditions(value) {
+        this._conditions = Array.isArray(value) ? value.map(condition => ({ ...condition })) : [];
+        const conditionsNormalized = this.refreshAvailableConditions();
+        const syncResult = this.syncConditionsWithPersistedConditions();
+        this.syncNextTemporalConditionId();
+        if (this.conditionsInitialized && (conditionsNormalized || syncResult.conditionsCleaned)) {
+            this.scheduleConditionsStateEmit();
+        }
+        if (!this.conditionsInitialized && (conditionsNormalized || syncResult.conditionsCleaned)) {
+            this.emitConditionsOnInit = true;
+        }
+        if (this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.scheduleRuleDefinitionStateEmit();
+        }
+        if (!this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
+        }
+        this.conditionsInitialized = true;
+    }
+    get conditions() {
+        return this._conditions;
+    }
+    conditionOperators = [];
+    conditionFields = [];
     conditionLabels = {};
     editing = false;
     nextTemporalConditionId = 1;
+    externalRuleDefinition = this.createEmptyRuleBuilderValue();
     title = '';
-    initValue = '';
+    set ruleDefinition(value) {
+        const normalizedValue = this.normalizeRuleBuilderValue(value);
+        if (this.areRuleBuilderValuesEqual(normalizedValue, this.externalRuleDefinition)) {
+            return;
+        }
+        this.externalRuleDefinition = normalizedValue;
+        this.editorRules = this.getRulesFromDefinition(normalizedValue.definition);
+        const syncResult = this.syncConditionsWithPersistedConditions();
+        this.syncNextTemporalConditionId();
+        if (this.conditionsInitialized && syncResult.conditionsCleaned) {
+            this.scheduleConditionsStateEmit();
+        }
+        if (this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.scheduleRuleDefinitionStateEmit();
+        }
+        if (!this.conditionsInitialized && syncResult.conditionsCleaned) {
+            this.emitConditionsOnInit = true;
+        }
+        if (!this.conditionsInitialized && syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
+        }
+    }
+    get ruleDefinition() {
+        return this.externalRuleDefinition;
+    }
     ruleDefinitionChange = new EventEmitter();
-    ruleDefinition = [];
+    conditionsChange = new EventEmitter();
+    editorRules = [];
     translate = inject(UicTranslateService);
     modal = inject(UicModalService);
     tinyAlert = inject(UicTinyAlertService);
@@ -8864,15 +8921,33 @@ class UicRuleBuilderComponent {
         return this.title || this.translate.translate('rule_builder.title');
     }
     ngOnInit() {
-        this.refreshAvailableConditions();
-        this.ruleDefinition = this.getRulesFromInitialValue();
+        if (!this.conditionsInitialized) {
+            this.emitConditionsOnInit = this.refreshAvailableConditions();
+            this.conditionsInitialized = true;
+        }
+        this.editorRules = this.getRulesFromDefinition(this.ruleDefinition.definition);
+        const syncResult = this.syncConditionsWithPersistedConditions();
         this.syncNextTemporalConditionId();
+        if (syncResult.conditionsCleaned) {
+            this.emitConditionsOnInit = true;
+        }
+        if (syncResult.referencesUpdated) {
+            this.emitRuleDefinitionOnInit = true;
+        }
+        if (this.emitConditionsOnInit) {
+            this.scheduleConditionsStateEmit();
+            this.emitConditionsOnInit = false;
+        }
+        if (this.emitRuleDefinitionOnInit) {
+            this.scheduleRuleDefinitionStateEmit();
+            this.emitRuleDefinitionOnInit = false;
+        }
     }
-    addRule(rules = this.ruleDefinition) {
+    addRule(rules = this.editorRules) {
         this.appendExpression(rules, this.createConditionRule());
         this.syncRuleDefinition();
     }
-    addGroup(rules = this.ruleDefinition) {
+    addGroup(rules = this.editorRules) {
         this.appendExpression(rules, this.createGroupRule());
         this.syncRuleDefinition();
     }
@@ -8902,6 +8977,7 @@ class UicRuleBuilderComponent {
                 conditions: this.conditions,
                 conditionOperators: this.conditionOperators,
                 conditionFields: this.conditionFields,
+                selectedConditionReference: targetRule.value ?? null,
             },
             size: 'medium'
         }).afterClosed().subscribe(r => {
@@ -8914,29 +8990,38 @@ class UicRuleBuilderComponent {
         });
     }
     print() {
-        const normalizedRules = this.normalizeRules(this.cloneRules(this.ruleDefinition));
+        const normalizedRules = this.normalizeRules(this.cloneRules(this.editorRules));
         if (!this.hasOperators(normalizedRules)) {
             this.tinyAlert.warning('rule_builder.validation.single_condition_not_allowed');
             return;
         }
-        this.ruleDefinition = normalizedRules;
-        this.markRulesAsSaved(this.ruleDefinition);
-        const output = this.buildRuleOutput();
-        this.initValue = output.definition;
-        this.ruleDefinitionChange.emit(output);
+        this.editorRules = normalizedRules;
+        this.markRulesAsSaved(this.editorRules);
+        this.emitRuleDefinitionState();
         this.editing = false;
     }
     reset() {
-        this.ruleDefinition = this.getRulesFromInitialValue();
+        this.editorRules = this.getRulesFromDefinition(this.ruleDefinition.definition);
         this.editing = false;
     }
     getOutput() {
-        this.ruleDefinition = this.normalizeRules(this.cloneRules(this.ruleDefinition));
+        this.editorRules = this.normalizeRules(this.cloneRules(this.editorRules));
         return this.buildRuleOutput();
     }
     getConditionLabel(value) {
         return this.resolveConditionLabel(value);
     }
+    getConditionDetailTip(value) {
+        const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === String(value));
+        if (!matchedCondition) {
+            return '';
+        }
+        return [
+            matchedCondition.fieldName,
+            matchedCondition.operatorName,
+            matchedCondition.value
+        ].filter(Boolean).join(' ');
+    }
     getOperatorLabel(value) {
         const normalizedValue = value === 'OR' ? 'OR' : 'AND';
         const translationKey = normalizedValue === 'AND'
@@ -8954,12 +9039,12 @@ class UicRuleBuilderComponent {
         rules.push(expression);
     }
     syncRuleDefinition() {
-        this.ruleDefinition = this.normalizeRules(this.ruleDefinition, true);
+        this.editorRules = this.normalizeRules(this.editorRules, true);
     }
     createConditionRule() {
         return {
             type: 'condition',
-            value: this.getNextConditionValue(),
+            value: null,
             unsaved: true
         };
     }
@@ -8970,11 +9055,6 @@ class UicRuleBuilderComponent {
             unsaved: true
         };
     }
-    getNextConditionValue() {
-        const usedConditions = new Set(this.collectConditionValues(this.ruleDefinition));
-        const nextOption = this.availableConditions.find(option => option.id != null && !usedConditions.has(String(option.id)));
-        return nextOption?.id ?? this.availableConditions[0]?.id ?? null;
-    }
     collectConditionValues(rules) {
         return rules.flatMap(rule => {
             if (rule.type === 'condition' && rule.value) {
@@ -9075,9 +9155,9 @@ class UicRuleBuilderComponent {
         const { rules } = this.parseTokens(tokens);
         return this.normalizeRules(rules);
     }
-    getRulesFromInitialValue() {
-        const rules = this.initValue.trim()
-            ? this.parseExpression(this.initValue)
+    getRulesFromDefinition(definition) {
+        const rules = definition.trim()
+            ? this.parseExpression(definition)
             : this.normalizeRules([]);
         this.markRulesAsSaved(rules);
         return rules;
@@ -9139,17 +9219,18 @@ class UicRuleBuilderComponent {
         const conditionReference = this.getConditionReference(normalizedCondition);
         const existingIndex = this.conditions.findIndex(item => String(this.getConditionReference(item)) === String(conditionReference));
         if (existingIndex >= 0) {
-            this.conditions[existingIndex] = normalizedCondition;
+            this._conditions[existingIndex] = normalizedCondition;
         }
         else {
-            this.conditions = [...this.conditions, normalizedCondition];
+            this._conditions = [...this._conditions, normalizedCondition];
         }
         this.refreshAvailableConditions();
+        this.scheduleConditionsStateEmit();
         return conditionReference;
     }
     buildRuleOutput() {
-        const definition = this.buildExpression(this.ruleDefinition);
-        const usedConditionReferences = new Set(this.collectConditionValues(this.ruleDefinition));
+        const definition = this.buildExpression(this.editorRules);
+        const usedConditionReferences = new Set(this.collectConditionValues(this.editorRules));
         const rulesToCreate = this.conditions
             .filter(condition => condition.id === 0 && !!condition.temporalId && usedConditionReferences.has(String(this.getConditionReference(condition))))
             .map(condition => ({
@@ -9164,24 +9245,111 @@ class UicRuleBuilderComponent {
             rulesToCreate
         };
     }
+    emitRuleDefinitionState() {
+        const output = this.buildRuleOutput();
+        this.externalRuleDefinition = output;
+        this.ruleDefinitionChange.emit(output);
+    }
+    emitConditionsState() {
+        this.conditionsChange.emit(this._conditions.map(condition => ({ ...condition })));
+    }
+    scheduleRuleDefinitionStateEmit() {
+        if (this.ruleDefinitionEmitScheduled) {
+            return;
+        }
+        this.ruleDefinitionEmitScheduled = true;
+        queueMicrotask(() => {
+            this.ruleDefinitionEmitScheduled = false;
+            this.emitRuleDefinitionState();
+        });
+    }
+    scheduleConditionsStateEmit() {
+        if (this.conditionsEmitScheduled) {
+            return;
+        }
+        this.conditionsEmitScheduled = true;
+        queueMicrotask(() => {
+            this.conditionsEmitScheduled = false;
+            this.emitConditionsState();
+        });
+    }
+    normalizeRuleBuilderValue(value) {
+        if (!value) {
+            return this.createEmptyRuleBuilderValue();
+        }
+        return {
+            definition: String(value.definition ?? ''),
+            rulesToCreate: Array.isArray(value.rulesToCreate)
+                ? value.rulesToCreate.map(rule => ({ ...rule }))
+                : []
+        };
+    }
+    createEmptyRuleBuilderValue() {
+        return {
+            definition: '',
+            rulesToCreate: []
+        };
+    }
+    areRuleBuilderValuesEqual(left, right) {
+        return left.definition === right.definition
+            && JSON.stringify(left.rulesToCreate) === JSON.stringify(right.rulesToCreate);
+    }
     refreshAvailableConditions() {
-        this.conditions = this.conditions.map(condition => {
+        let changed = false;
+        this._conditions = this._conditions.map(condition => {
             if (condition.id !== 0 || condition.temporalId) {
                 return condition;
             }
+            changed = true;
             return {
                 ...condition,
                 temporalId: this.getNextTemporalConditionId()
             };
         });
-        this.availableConditions = this.conditions.map(condition => ({
-            id: this.getConditionReference(condition),
-            text: condition.description
-        }));
-        this.conditionLabels = this.conditions.reduce((labels, condition) => {
+        this.conditionLabels = this._conditions.reduce((labels, condition) => {
             labels[String(this.getConditionReference(condition))] = condition.description;
             return labels;
         }, {});
+        return changed;
+    }
+    syncConditionsWithPersistedConditions() {
+        const persistedConditionsByTemporalId = new Map(this._conditions
+            .filter(condition => condition.id !== 0 && !!condition.temporalId)
+            .map(condition => [String(condition.temporalId), condition]));
+        if (persistedConditionsByTemporalId.size === 0) {
+            return {
+                referencesUpdated: false,
+                conditionsCleaned: false
+            };
+        }
+        const referencesUpdated = this.replaceConditionReferences(this.editorRules, persistedConditionsByTemporalId);
+        const previousLength = this._conditions.length;
+        this._conditions = this._conditions.filter(condition => {
+            return condition.id !== 0
+                || !condition.temporalId
+                || !persistedConditionsByTemporalId.has(String(condition.temporalId));
+        });
+        return {
+            referencesUpdated,
+            conditionsCleaned: previousLength !== this._conditions.length
+        };
+    }
+    replaceConditionReferences(rules, persistedConditionsByTemporalId) {
+        let updated = false;
+        for (const rule of rules) {
+            if (rule.type === 'condition' && typeof rule.value === 'string') {
+                const persistedCondition = persistedConditionsByTemporalId.get(rule.value);
+                if (persistedCondition) {
+                    rule.value = persistedCondition.id;
+                    rule.unsaved = false;
+                    updated = true;
+                }
+            }
+            if (rule.type === 'group' && rule.rules) {
+                updated = this.replaceConditionReferences(rule.rules, persistedConditionsByTemporalId) || updated;
+            }
+        }
+        return updated;
     }
     getConditionReference(condition) {
         return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
@@ -9193,8 +9361,10 @@ class UicRuleBuilderComponent {
     }
     syncNextTemporalConditionId() {
         const references = [
-            ...this.conditions.map(condition => String(this.getConditionReference(condition))),
-            ...this.collectConditionValues(this.ruleDefinition)
+            ...this.conditions
+                .flatMap(condition => [String(this.getConditionReference(condition)), String(condition.temporalId ?? '')])
+                .filter(reference => reference !== ''),
+            ...this.collectConditionValues(this.editorRules)
         ];
         const nextId = references.reduce((maxId, reference) => {
             const match = reference.match(/^temp_(\d+)$/);
@@ -9206,18 +9376,17 @@ class UicRuleBuilderComponent {
         this.nextTemporalConditionId = nextId + 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", initValue: "initValue" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange" }, ngImport: i0, template: "<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (ruleDefinition.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (ruleDefinition.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\" [class.condition-box-empty]=\"rule.value == null || rule.value === ''\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [tip]=\"getConditionDetailTip(rule.value)\">{{ getConditionLabel(rule.value) }}</div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-rule-builder', imports: [
                         CommonModule,
                         UicButtonComponent,
-                        UicSelectComponent,
                         FormsModule,
                         UicToolTipDirective,
                         UicTranslatePipe
-                    ], template: "<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (ruleDefinition.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (ruleDefinition.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"] }]
+                    ], template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div class=\"condition-box\" [class.condition-box-empty]=\"rule.value == null || rule.value === ''\">{{ rule.value == null || rule.value === '' ? ('rule_builder.select_condition' | uicTranslate) : (conditionLabels[rule.value] || rule.value) }}</div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [tip]=\"getConditionDetailTip(rule.value)\">{{ getConditionLabel(rule.value) }}</div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}\n"] }]
         }], propDecorators: { conditions: [{
                 type: Input
             }], conditionOperators: [{
@@ -9226,10 +9395,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], title: [{
                 type: Input
-            }], initValue: [{
+            }], ruleDefinition: [{
                 type: Input
             }], ruleDefinitionChange: [{
                 type: Output
+            }], conditionsChange: [{
+                type: Output
             }] } });
 
 class FirstCapitalPipe {