ui-core-abv 0.6.58 → 0.6.59

package/fesm2022/ui-core-abv.mjs

@@ -8755,6 +8755,7 @@ class UicUserFormbuilderComponent {
     modalService = inject(UicModalService);
     tinyAlertService = inject(UicTinyAlertService);
     translateService = inject(UicTranslateService);
+    disabled = false;
     formTitle = 'Nuevo formulario';
     readOnly = input(true);
     editableFormInput = input({ cols: 2, blocks: [] }, { alias: 'editableForm' });
@@ -9004,7 +9005,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: { 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" }, 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            <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\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\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.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", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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 }, 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" }, 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\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.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", "fileUidResolverFn"], outputs: ["formSubmit", "formChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: FieldEditorComponent, selector: "lib-field-editor", inputs: ["config", "options"], outputs: ["fieldChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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,
@@ -9016,8 +9017,10 @@ 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            <ui-button color=\"black\" icon=\"ri-edit-line\" text=\"Editar\" (click)=\"enableEditMode()\"></ui-button>\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\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.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: { formTitle: [{
+                    ], 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\"\r\n                            (blockChange)=\"onBlockChange(i, $event)\"\r\n                            (addFieldRequest)=\"addField(block.code, $event)\"\r\n                            (notifySelectedField)=\"selectedField.set($event)\"\r\n                            (deleteBlock)=\"deleteBlock($event)\">\r\n                        </lib-block-editor>\r\n                    }\r\n                    <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n                </div>\r\n            </div>\r\n            <!-- PROPERTIES -->\r\n            <div class=\"formeditor-properties\">\r\n                <h3>Propiedades</h3>\r\n                <div class=\"formeditor-properties-form\">\r\n                    @if (selectedField() ) {\r\n                        <lib-field-editor \r\n                            [config]=\"selectedField()!\"\r\n                            [options]=\"dependencyOptions()\"\r\n                            (fieldChange)=\"onFieldChange($event)\">\r\n                        </lib-field-editor>\r\n                    }@else{\r\n                        <div class=\"no-selected-field\">\r\n                            <i class=\"ri-edit-box-line\"></i>\r\n                            <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }@else {\r\n            <div class=\"form-preview\">\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}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.form-preview{padding:20px;overflow:auto;background-color:#fff}.focused{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}.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
             }] } });
 
@@ -9196,6 +9199,7 @@ class UicRuleBuilderComponent {
     conditionsEmitScheduled = false;
     ruleDefinitionEmitScheduled = false;
     _conditions = [];
+    disabled = false;
     set conditions(value) {
         this._conditions = Array.isArray(value) ? value.map(condition => ({ ...condition })) : [];
         const conditionsNormalized = this.refreshAvailableConditions();
@@ -9710,7 +9714,7 @@ class UicRuleBuilderComponent {
         this.nextTemporalConditionId = nextId + 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\n                        class=\"condition-box\"\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n                        @if (rule.value == null || rule.value === '') {\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\n                        } @else if (isConditionLabelPending(rule.value)) {\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                        } @else {\n                            {{ getConditionLabel(rule.value) }}\n                        }\n                    </div>\n                </div>\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n            </div>\n        }\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                    } @else {\n                        {{ getConditionLabel(rule.value) }}\n                    }\n                </div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { disabled: "disabled", conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", 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        @if (!disabled) {\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    }\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\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\r\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
@@ -9720,8 +9724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicToolTipDirective,
                         UicTranslatePipe
-                    ], template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\n                        class=\"condition-box\"\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\n                        @if (rule.value == null || rule.value === '') {\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\n                        } @else if (isConditionLabelPending(rule.value)) {\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                        } @else {\n                            {{ getConditionLabel(rule.value) }}\n                        }\n                    </div>\n                </div>\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\n            </div>\n        }\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\n                    } @else {\n                        {{ getConditionLabel(rule.value) }}\n                    }\n                </div>\n            }\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
-        }], propDecorators: { conditions: [{
+                    ], 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        @if (!disabled) {\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    }\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\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\r\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], conditions: [{
                 type: Input
             }], conditionOperators: [{
                 type: Input