ui-core-abv 0.6.35 → 0.6.38

package/fesm2022/ui-core-abv.mjs

@@ -324,10 +324,14 @@ const DICTIONARY_EN = {
         edit: 'Edit',
         edit_tip: 'Edit rule',
         edit_condition_tip: 'Click to edit condition',
+        select_condition: '- select condition -',
         operators: {
             and: 'AND',
             or: 'OR',
         },
+        validation: {
+            single_condition_not_allowed: 'Rules cannot be created with a single condition',
+        },
         definition: {
             cancel_and_back: 'Cancel and go back',
             create_and_select: 'Create and select',
@@ -597,20 +601,24 @@ const DICTIONARY_ES = {
         add_group_tip: 'Agregar grupo',
         reset: 'Reiniciar',
         reset_tip: 'Descartar cambios no guardados',
-        save: 'Guardar',
+        save: 'Guardar regla',
         save_tip: 'Guardar regla construida',
         delete_rule_tip: 'Eliminar regla',
         delete_group_tip: 'Eliminar grupo',
         toggle_operator_tip: 'Click para cambiar de operador',
         no_rules: 'No hay reglas definidas',
         rules_management: 'Seleccionar reglas',
-        edit: 'Editar',
+        edit: 'Editar regla',
         edit_tip: 'Editar regla',
         edit_condition_tip: 'Click para editar la condición',
+        select_condition: '- seleccionar condición -',
         operators: {
             and: 'Y',
             or: 'O',
         },
+        validation: {
+            single_condition_not_allowed: 'No se pueden crear reglas con una sola condición',
+        },
         definition: {
             cancel_and_back: 'Cancelar y volver',
             create_and_select: 'Crear y seleccionar',
@@ -1594,7 +1602,7 @@ class UicFileInputComponent extends base$a {
                 useExisting: forwardRef(() => UicFileInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFileInputComponent, decorators: [{
             type: Component,
@@ -1604,7 +1612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicFileInputComponent),
                             multi: true
                         }
-                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\r\n            #fileInput\r\n            class=\"fileinput-native\"\r\n            type=\"file\"\r\n            (change)=\"onNativeInputChange($event)\"\r\n            [attr.multiple]=\"multy ? '' : null\"\r\n            [attr.accept]=\"acceptAttribute\"\r\n            [disabled]=\"disabled || loading\"\r\n        />\r\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
+                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fileinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'dragging':isDragging}\">\r\n        <input\n            #fileInput\n            class=\"fileinput-native\"\n            type=\"file\"\n            (change)=\"onNativeInputChange($event)\"\n            [attr.multiple]=\"multy ? '' : null\"\n            [attr.accept]=\"acceptAttribute\"\n            [disabled]=\"disabled || loading\"\n        />\n        @if (internalIcon) {\r\n            <i class=\"input-internalicon {{internalIcon}}\" ></i>\r\n        }\r\n        <div class=\"fileinput-content\" >\r\n            @if (!disabled && !loading) {\r\n                <ui-button\r\n                    type=\"bordered\"\r\n                    color=\"black\"\r\n                    size=\"s\"\r\n                    (click)=\"openFileBrowser()\"\r\n                >Seleccionar</ui-button>\r\n            }\r\n            <div\r\n                class=\"fileinput-reel\"\r\n                (dragover)=\"onDragOver($event)\"\r\n                (dragleave)=\"onDragLeave($event)\"\r\n                (drop)=\"onDrop($event)\"\r\n            >\r\n                @if (!files.length) {\r\n                    <div class=\"fileinput-empty\">\r\n                        Aun no hay archivos\r\n                    </div>\r\n                } @else {\r\n                    @for (item of files; track $index) {\r\n                        <div class=\"fileinput-item\">\r\n                            <i class=\"fileinput-item__icon ri {{ getIcon(item) }}\" aria-hidden=\"true\"></i>\r\n                            <span (click)=\"downloadFile(item)\" class=\"fileinput-item__name\">{{item.name}}</span>\r\n                            <ui-button\r\n                                size=\"s\"\r\n                                [iconOnly]=\"true\"\r\n                                type=\"ghost\"\r\n                                icon=\"ri-close-line\"\r\n                                (click)=\"removeFile($index)\"\r\n                                [disabled]=\"disabled || loading\"\r\n                            ></ui-button>\r\n                        </div>\r\n                    }\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n", ".fileinput{background-color:#fff;border:dashed 1px var(--grey-300);display:flex;align-items:center;border-radius:var(--input-radius);position:relative;transition:border-color .2s ease,background-color .2s ease}.fileinput.dragging{border-color:var(--primary-500, var(--blue-500));background-color:#1d4ed814}.fileinput-native{display:none}.fileinput-content{display:flex;padding:.25rem;gap:.25rem;flex:1 1;align-items:center}.fileinput-reel{display:flex;flex-wrap:wrap;flex:1 1;gap:10px;min-height:32px;align-items:center}.fileinput-item{display:flex;align-items:center;font-size:12px;line-height:12px;gap:10px;padding:0 8px;border-radius:5px;background-color:var(--grey-100);min-height:32px}.fileinput-item__icon{font-size:18px;color:var(--grey-600)}.fileinput-item__name{max-width:180px;text-decoration:underline;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fileinput-item__name:hover{color:var(--primary-500)}.fileinput-empty{font-size:12px;padding:0 5px;color:var(--grey-500)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -2505,7 +2513,7 @@ class UicSelectComponent extends base$6 {
                 useExisting: forwardRef(() => UicSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\n<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fakeinput-wrapp\" > \n        <!-- INPUT -->\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n            @if (internalIcon) {\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n            }\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n                @if (selectedOption?.icon) {\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n                }\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n            </div>\n            @if (!disabled && !loading) {\n                <i  class=\"ri-arrow-down-s-line\"></i>\n            }\n        </div>            \n        <!-- DESPLEGABLE -->\n        <ng-template #dropdownTemplate >\n             <div class=\"input-options\">\n                 @if (showSearcher) {\n                    <div class=\"select-searcher\">\n                        <input\n                            #searchInput\n                            type=\"text\"\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n                            [value]=\"searchTerm\"\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\n                            (click)=\"$event.stopPropagation()\">\n                        <ui-button\n                            icon=\"ri-close-line\"\n                            size=\"s\"\n                            type=\"ghost\"\n                            color=\"red\"\n                            [iconOnly]=\"true\"\n                            (click)=\"clearSearch($event)\">\n                        </ui-button>\n                    </div>\n                 }\n                 <!-- OPCIONES -->\n                 <div class=\"input-option-scroll\">\n                    @if (options.length > 0 &&  nullable) {\n                        <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n                        <div class=\"option-divider\"></div>\n                    }\n    \n                    \n                    @for (option of filteredOptions; track $index) {\n                        <div (click)=\"selectOption(option)\"  class=\"input-option\">\n                            @if (option.icon) {\n                                <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n                            }\n                            <div style=\"padding: 2px;\" >\n                                <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n                                <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n                                    {{option.detail}}\n                                </div>\n                            </div>\n                        </div>\n                        @if ( $index < (filteredOptions.length - 1) ) {\n                            <span class=\"option-divider\"></span>\n                        }\n                        \n                    }\n    \n                     @if (filteredOptions.length == 0) {\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n                     }\n                 </div>\n             </div>\n        </ng-template>\n    \n    </div>\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (options.length > 0 &&  nullable) {\r\n                        <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (option of filteredOptions; track $index) {\r\n                        <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                            @if (option.icon) {\r\n                                <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                            }\r\n                            <div style=\"padding: 2px;\" >\r\n                                <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\r\n                                <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                    {{option.detail}}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        @if ( $index < (filteredOptions.length - 1) ) {\r\n                            <span class=\"option-divider\"></span>\r\n                        }\r\n                        \r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
             type: Component,
@@ -2515,7 +2523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicSelectComponent),
                             multi: true
                         }
-                    ], template: "\n<ui-input-wrapper\n    [icon]=\"icon\"\n    [iconColor]=\"iconColor\"\n    [label]=\"label\"\n    [error]=\"error\"\n    [tip]=\"tip\"\n    [disabled]=\"disabled\">\n    <div class=\"fakeinput-wrapp\" > \n        <!-- INPUT -->\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\n            @if (internalIcon) {\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\n            }\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\n                @if (selectedOption?.icon) {\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\n                }\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\n            </div>\n            @if (!disabled && !loading) {\n                <i  class=\"ri-arrow-down-s-line\"></i>\n            }\n        </div>            \n        <!-- DESPLEGABLE -->\n        <ng-template #dropdownTemplate >\n             <div class=\"input-options\">\n                 @if (showSearcher) {\n                    <div class=\"select-searcher\">\n                        <input\n                            #searchInput\n                            type=\"text\"\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\n                            [value]=\"searchTerm\"\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\n                            (click)=\"$event.stopPropagation()\">\n                        <ui-button\n                            icon=\"ri-close-line\"\n                            size=\"s\"\n                            type=\"ghost\"\n                            color=\"red\"\n                            [iconOnly]=\"true\"\n                            (click)=\"clearSearch($event)\">\n                        </ui-button>\n                    </div>\n                 }\n                 <!-- OPCIONES -->\n                 <div class=\"input-option-scroll\">\n                    @if (options.length > 0 &&  nullable) {\n                        <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\n                        <div class=\"option-divider\"></div>\n                    }\n    \n                    \n                    @for (option of filteredOptions; track $index) {\n                        <div (click)=\"selectOption(option)\"  class=\"input-option\">\n                            @if (option.icon) {\n                                <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\n                            }\n                            <div style=\"padding: 2px;\" >\n                                <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\n                                <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\n                                    {{option.detail}}\n                                </div>\n                            </div>\n                        </div>\n                        @if ( $index < (filteredOptions.length - 1) ) {\n                            <span class=\"option-divider\"></span>\n                        }\n                        \n                    }\n    \n                     @if (filteredOptions.length == 0) {\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\n                     }\n                 </div>\n             </div>\n        </ng-template>\n    \n    </div>\n</ui-input-wrapper>\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n    <div class=\"fakeinput-wrapp\" > \r\n        <!-- INPUT -->\r\n        <div  (click)=\"openList()\"  class=\"fakeinput\" #fakeinput \r\n            [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':loading}\" style=\"cursor: pointer;\">\r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon {{internalIcon}} f-{{internalIconColor}}\" ></i>\r\n            }\r\n            <div class=\"fakeinput-emptytext\" [class.disabled-placeholder]=\"disabled && !selectedOption?.text\" >\r\n                @if (selectedOption?.icon) {\r\n                    <i class=\"{{selectedOption?.icon}} f-{{selectedOption?.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                }\r\n                {{(selectedOption?.text || nonSelectedText) | uicTranslate}}\r\n            </div>\r\n            @if (!disabled && !loading) {\r\n                <i  class=\"ri-arrow-down-s-line\"></i>\r\n            }\r\n        </div>            \r\n        <!-- DESPLEGABLE -->\r\n        <ng-template #dropdownTemplate >\r\n             <div class=\"input-options\">\r\n                 @if (showSearcher) {\r\n                    <div class=\"select-searcher\">\r\n                        <input\r\n                            #searchInput\r\n                            type=\"text\"\r\n                            [placeholder]=\"'select.search_placeholder'|uicTranslate\"\r\n                            [value]=\"searchTerm\"\r\n                            (input)=\"updateSearchTerm($any($event.target).value)\"\r\n                            (click)=\"$event.stopPropagation()\">\r\n                        <ui-button\r\n                            icon=\"ri-close-line\"\r\n                            size=\"s\"\r\n                            type=\"ghost\"\r\n                            color=\"red\"\r\n                            [iconOnly]=\"true\"\r\n                            (click)=\"clearSearch($event)\">\r\n                        </ui-button>\r\n                    </div>\r\n                 }\r\n                 <!-- OPCIONES -->\r\n                 <div class=\"input-option-scroll\">\r\n                    @if (options.length > 0 &&  nullable) {\r\n                        <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >{{noneText | uicTranslate}}</div>\r\n                        <div class=\"option-divider\"></div>\r\n                    }\r\n    \r\n                    \r\n                    @for (option of filteredOptions; track $index) {\r\n                        <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                            @if (option.icon) {\r\n                                <i class=\"{{option.icon}} f-{{option.iconColor}}\" style=\"margin-right: 5px;\"></i>\r\n                            }\r\n                            <div style=\"padding: 2px;\" >\r\n                                <div class=\"f-medium option-text-highlight\" [innerHTML]=\"highlightMatch(option.text)\"></div>\r\n                                <div *ngIf=\"showSubtitle\" class=\"f-extralight\" >\r\n                                    {{option.detail}}\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        @if ( $index < (filteredOptions.length - 1) ) {\r\n                            <span class=\"option-divider\"></span>\r\n                        }\r\n                        \r\n                    }\r\n    \r\n                     @if (filteredOptions.length == 0) {\r\n                         <div class=\"fakeinput-alert t-disabled\">{{emptyText | uicTranslate}}</div>\r\n                     }\r\n                 </div>\r\n             </div>\r\n        </ng-template>\r\n    \r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -4698,7 +4706,7 @@ class UicDropdownContainerComponent {
                 provide: DROPDOWN_OVERLAY_CONTROLS,
                 useExisting: forwardRef(() => UicDropdownContainerComponent),
             },
-        ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n  <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n  <div  class=\"ui-dropdown-panel\">\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
             type: Component,
@@ -4707,7 +4715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: DROPDOWN_OVERLAY_CONTROLS,
                             useExisting: forwardRef(() => UicDropdownContainerComponent),
                         },
-                    ], template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n  <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n  <div  class=\"ui-dropdown-panel\">\r\n    <ng-content select=\"[content]\"></ng-content>\r\n  </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
+                    ], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n  <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n  <div  class=\"ui-dropdown-panel\">\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
         }], propDecorators: { buttonLabel: [{
                 type: Input
             }], disabled: [{
@@ -5105,11 +5113,11 @@ class UicActionButtonComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label | uicTranslate }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label | uicTranslate }}</span>\n            </div>\n        }\n    </div>\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label | uicTranslate }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
+            args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule, UicTranslatePipe], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" [placeholder]=\"'common.all' | uicTranslate\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label | uicTranslate }}</span>\n            </div>\n        }\n    </div>\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"closeMenu()\">{{'common.close' | uicTranslate}}</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">{{'common.apply' | uicTranslate}}</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], options: [{
@@ -5236,7 +5244,7 @@ class TinyAlertComponent {
         this.modalRef.closeFloating(value ? this.response : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\r\n    \r\n    @if ( data.showInput ){\r\n        <ui-input>\r\n            <input type=\"text\">\r\n        </ui-input>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\n    \r\n    @if ( data.showInput ){\r\n        <ui-input>\r\n            <input type=\"text\">\r\n        </ui-input>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
@@ -5244,7 +5252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicInputComponent,
                         UicTranslatePipe
-                    ], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\r\n    \r\n    @if ( data.showInput ){\r\n        <ui-input>\r\n            <input type=\"text\">\r\n        </ui-input>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
+                    ], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title | uicTranslate}} </div>\r\n    \r\n    <div class=\"alert-body\" [innerHTML]=\"data.body | uicTranslate\">   </div>\n    \r\n    @if ( data.showInput ){\r\n        <ui-input>\r\n            <input type=\"text\">\r\n        </ui-input>\r\n    }\r\n\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{(data.cancelButtonText??'common.cancel') | uicTranslate}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{(data.okButtonText??'common.continue') | uicTranslate}} </ui-button>\r\n    </div>\r\n    \r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;line-height:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -5294,11 +5302,11 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"uic_modal\" \r\n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"uic_modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>\r\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
+            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div  class=\"uic_backdrop\" (click)=\"closeOuside()\">   \n    <div @pushTop class=\"uic_modal\" \n        [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n        (click)=\"$event.stopPropagation()\">\n        \n        @if ( myConfig.title) {\n            <div class=\"uic_modal-header\">\n                {{myConfig.title}}\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n            </div>\n        }\n        <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n            <ng-template cdkPortalOutlet></ng-template>\n        </div>\n\n    </div>\n</div>\n", styles: [".uic_backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;overflow:hidden;display:flex;flex-direction:column}.uic_modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -6136,11 +6144,11 @@ class UicSkeletonCardsComponent {
         return this.cards > 0 ? this.cards : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n    @for (card of [].constructor(cardsCount); track $index) {\r\n        <div class=\"skeleton-card skeleton-gradient\"></div>\r\n    }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonCardsComponent, isStandalone: true, selector: "ui-skeleton-cards", inputs: { cards: "cards", gap: "gap", minCardWidthPx: "minCardWidthPx" }, ngImport: i0, template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n    @for (card of [].constructor(cardsCount); track $index) {\n        <div class=\"skeleton-card skeleton-gradient\"></div>\n    }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonCardsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\r\n    @for (card of [].constructor(cardsCount); track $index) {\r\n        <div class=\"skeleton-card skeleton-gradient\"></div>\r\n    }\r\n</div>\r\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+            args: [{ selector: 'ui-skeleton-cards', imports: [CommonModule], template: "<div class=\"skeleton-cards-grid\" [ngStyle]=\"gridStyle\">\n    @for (card of [].constructor(cardsCount); track $index) {\n        <div class=\"skeleton-card skeleton-gradient\"></div>\n    }\n</div>\n", styles: [".skeleton-cards-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 0}.skeleton-card{width:100%;aspect-ratio:1/1;border-radius:var(--input-radius)}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
         }], propDecorators: { cards: [{
                 type: Input
             }], gap: [{
@@ -7534,7 +7542,7 @@ class UicEditableTableComponent {
         this.visibleRowsCount = Math.min(this.visibleRowsCount, totalRows);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\r\n    @if (headers.length > 0) {\r\n        <table class=\"xls-table\">\r\n            <colgroup>\r\n                @if (rowActions().length > 0) {\r\n                    <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\r\n                }\r\n                @for (header of headers; track $index) {\r\n                <col [style.width.px]=\"columnWidths[$index]\">\r\n                }\r\n            </colgroup>\r\n            <thead>\r\n                <tr>\r\n                    @if (rowActions().length > 0) {\r\n                        <th class=\"action-col\"></th>\r\n                    }\r\n                    @for (header of headers; track $index) {\r\n                        <th>\r\n                            @if (pendingColumnIndex === $index) {\r\n                                <div class=\"hea-th hea-th-edit\">\r\n                                    <input\r\n                                        class=\"new-col-name\"\r\n                                        type=\"text\"\r\n                                        [(ngModel)]=\"pendingColumnName\"\r\n                                        (ngModelChange)=\"onPendingColumnNameChange($event)\"\r\n                                        (blur)=\"onPendingColumnNameBlur()\"\r\n                                        (keydown)=\"onPendingColumnNameKeydown($event)\"\r\n                                        [attr.data-new-col]=\"$index\">\r\n                                    @if (pendingColumnName.trim()) {\r\n                                        <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n                                    }\r\n                                </div>\r\n                            } @else {\r\n                                <div class=\"hea-th\">\r\n                                    <div style=\"flex: 1 1; min-width: 0;\">\r\n                                        {{ header }} \r\n                                    </div>\r\n                                    \r\n                                    @if (resolvedConfig().canAddColumn) {\r\n                                        <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\"  size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n                                    }\r\n                                    @if (resolvedConfig().canDeleteColumn){\r\n                                        <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n                                    }\r\n                                    @if (resolvedConfig().resizeableColumns) {\r\n                                        <span\r\n                                            class=\"column-resize-handle\"\r\n                                            (pointerdown)=\"startColumnResize($event, $index)\"\r\n                                        ></span>\r\n                                    }\r\n\r\n                                </div>\r\n                            }\r\n                        </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of visibleRows(); track $index; let i = $index) {\r\n                    <tr>\r\n                        @if (rowActions().length > 0) {\r\n                            <td class=\"action-col\">\r\n                                <div class=\"action-cell\">\r\n                                    <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n                        @for (header of headers; track $index; let col = $index) {\r\n                            <td>\r\n                                <input\r\n                                    [disabled]=\"columnDisabledByHeader()[header]\"\r\n                                    [type]=\"columnInputTypeByHeader()[header]\"\r\n                                    [attr.data-row]=\"i\"\r\n                                    [attr.data-col]=\"col\"\r\n                                    [(ngModel)]=\"row[header]\"\r\n                                    (blur)=\"onCellBlur()\"\r\n                                    (keydown)=\"onCellKeydown($event, i, col)\">\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n        @if (hasMoreRows()) {\r\n            <div class=\"show-more\">\r\n                <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n                    {{'excel_table.see_more' | uicTranslate}}\r\n                </ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"table-counter\">\r\n            {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\r\n        </div>\r\n    } @else{\r\n        <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n    }\r\n</div>\r\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicEditableTableComponent, isStandalone: true, selector: "ui-editable-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, columnsConfig: { classPropertyName: "columnsConfig", publicName: "columnsConfig", isSignal: true, isRequired: false, transformFunction: null }, visibleRowsStep: { classPropertyName: "visibleRowsStep", publicName: "visibleRowsStep", isSignal: false, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { recordChange: "recordChange" }, ngImport: i0, template: "<div class=\"xlstable-overflow\">\n    @if (headers.length > 0) {\n        <table class=\"xls-table\">\n            <colgroup>\n                @if (rowActions().length > 0) {\n                    <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n                }\n                @for (header of headers; track $index) {\n                <col [style.width.px]=\"columnWidths[$index]\">\n                }\n            </colgroup>\n            <thead>\n                <tr>\n                    @if (rowActions().length > 0) {\n                        <th class=\"action-col\"></th>\n                    }\n                    @for (header of headers; track $index) {\n                        <th>\n                            @if (pendingColumnIndex === $index) {\n                                <div class=\"hea-th hea-th-edit\">\n                                    <input\n                                        class=\"new-col-name\"\n                                        type=\"text\"\n                                        [(ngModel)]=\"pendingColumnName\"\n                                        (ngModelChange)=\"onPendingColumnNameChange($event)\"\n                                        (blur)=\"onPendingColumnNameBlur()\"\n                                        (keydown)=\"onPendingColumnNameKeydown($event)\"\n                                        [attr.data-new-col]=\"$index\">\n                                    @if (pendingColumnName.trim()) {\n                                        <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"hea-th\">\n                                    <div style=\"flex: 1 1; min-width: 0;\">\n                                        {{ header }} \n                                    </div>\n                                    \n                                    @if (resolvedConfig().canAddColumn) {\n                                        <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\"  size=\"s\" [iconOnly]=\"true\"></ui-button> \n                                    }\n                                    @if (resolvedConfig().canDeleteColumn){\n                                        <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\n                                    }\n                                    @if (resolvedConfig().resizeableColumns) {\n                                        <span\n                                            class=\"column-resize-handle\"\n                                            (pointerdown)=\"startColumnResize($event, $index)\"\n                                        ></span>\n                                    }\n\n                                </div>\n                            }\n                        </th>\n                    }\n                </tr>\n            </thead>\n            <tbody>\n                @for (row of visibleRows(); track $index; let i = $index) {\n                    <tr>\n                        @if (rowActions().length > 0) {\n                            <td class=\"action-col\">\n                                <div class=\"action-cell\">\n                                    <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n                                </div>\n                            </td>\n                        }\n                        @for (header of headers; track $index; let col = $index) {\n                            <td>\n                                <input\n                                    [disabled]=\"columnDisabledByHeader()[header]\"\n                                    [type]=\"columnInputTypeByHeader()[header]\"\n                                    [attr.data-row]=\"i\"\n                                    [attr.data-col]=\"col\"\n                                    [(ngModel)]=\"row[header]\"\n                                    (blur)=\"onCellBlur()\"\n                                    (keydown)=\"onCellKeydown($event, i, col)\">\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n        @if (hasMoreRows()) {\n            <div class=\"show-more\">\n                <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n                    {{'excel_table.see_more' | uicTranslate}}\n                </ui-button>\n            </div>\n        }\n        <div class=\"table-counter\">\n            {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n        </div>\n    } @else{\n        <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n    }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { 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: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, decorators: [{
             type: Component,
@@ -7545,7 +7553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicTranslatePipe,
                         UicToolTipDirective
-                    ], template: "<div class=\"xlstable-overflow\">\r\n    @if (headers.length > 0) {\r\n        <table class=\"xls-table\">\r\n            <colgroup>\r\n                @if (rowActions().length > 0) {\r\n                    <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\r\n                }\r\n                @for (header of headers; track $index) {\r\n                <col [style.width.px]=\"columnWidths[$index]\">\r\n                }\r\n            </colgroup>\r\n            <thead>\r\n                <tr>\r\n                    @if (rowActions().length > 0) {\r\n                        <th class=\"action-col\"></th>\r\n                    }\r\n                    @for (header of headers; track $index) {\r\n                        <th>\r\n                            @if (pendingColumnIndex === $index) {\r\n                                <div class=\"hea-th hea-th-edit\">\r\n                                    <input\r\n                                        class=\"new-col-name\"\r\n                                        type=\"text\"\r\n                                        [(ngModel)]=\"pendingColumnName\"\r\n                                        (ngModelChange)=\"onPendingColumnNameChange($event)\"\r\n                                        (blur)=\"onPendingColumnNameBlur()\"\r\n                                        (keydown)=\"onPendingColumnNameKeydown($event)\"\r\n                                        [attr.data-new-col]=\"$index\">\r\n                                    @if (pendingColumnName.trim()) {\r\n                                        <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n                                    }\r\n                                </div>\r\n                            } @else {\r\n                                <div class=\"hea-th\">\r\n                                    <div style=\"flex: 1 1; min-width: 0;\">\r\n                                        {{ header }} \r\n                                    </div>\r\n                                    \r\n                                    @if (resolvedConfig().canAddColumn) {\r\n                                        <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\"  size=\"s\" [iconOnly]=\"true\"></ui-button> \r\n                                    }\r\n                                    @if (resolvedConfig().canDeleteColumn){\r\n                                        <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\r\n                                    }\r\n                                    @if (resolvedConfig().resizeableColumns) {\r\n                                        <span\r\n                                            class=\"column-resize-handle\"\r\n                                            (pointerdown)=\"startColumnResize($event, $index)\"\r\n                                        ></span>\r\n                                    }\r\n\r\n                                </div>\r\n                            }\r\n                        </th>\r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                @for (row of visibleRows(); track $index; let i = $index) {\r\n                    <tr>\r\n                        @if (rowActions().length > 0) {\r\n                            <td class=\"action-col\">\r\n                                <div class=\"action-cell\">\r\n                                    <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\r\n                                </div>\r\n                            </td>\r\n                        }\r\n                        @for (header of headers; track $index; let col = $index) {\r\n                            <td>\r\n                                <input\r\n                                    [disabled]=\"columnDisabledByHeader()[header]\"\r\n                                    [type]=\"columnInputTypeByHeader()[header]\"\r\n                                    [attr.data-row]=\"i\"\r\n                                    [attr.data-col]=\"col\"\r\n                                    [(ngModel)]=\"row[header]\"\r\n                                    (blur)=\"onCellBlur()\"\r\n                                    (keydown)=\"onCellKeydown($event, i, col)\">\r\n                            </td>\r\n                        }\r\n                    </tr>\r\n                }\r\n            </tbody>\r\n        </table>\r\n        @if (hasMoreRows()) {\r\n            <div class=\"show-more\">\r\n                <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\r\n                    {{'excel_table.see_more' | uicTranslate}}\r\n                </ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"table-counter\">\r\n            {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\r\n        </div>\r\n    } @else{\r\n        <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\r\n    }\r\n</div>\r\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
+                    ], template: "<div class=\"xlstable-overflow\">\n    @if (headers.length > 0) {\n        <table class=\"xls-table\">\n            <colgroup>\n                @if (rowActions().length > 0) {\n                    <col class=\"action-col\" [style.width.px]=\"actionColumnWidth\">\n                }\n                @for (header of headers; track $index) {\n                <col [style.width.px]=\"columnWidths[$index]\">\n                }\n            </colgroup>\n            <thead>\n                <tr>\n                    @if (rowActions().length > 0) {\n                        <th class=\"action-col\"></th>\n                    }\n                    @for (header of headers; track $index) {\n                        <th>\n                            @if (pendingColumnIndex === $index) {\n                                <div class=\"hea-th hea-th-edit\">\n                                    <input\n                                        class=\"new-col-name\"\n                                        type=\"text\"\n                                        [(ngModel)]=\"pendingColumnName\"\n                                        (ngModelChange)=\"onPendingColumnNameChange($event)\"\n                                        (blur)=\"onPendingColumnNameBlur()\"\n                                        (keydown)=\"onPendingColumnNameKeydown($event)\"\n                                        [attr.data-new-col]=\"$index\">\n                                    @if (pendingColumnName.trim()) {\n                                        <ui-button (mousedown)=\"onPendingColumnCheckMouseDown()\" (click)=\"confirmPendingColumnName()\" icon=\"ri-check-line\" color=\"green\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"hea-th\">\n                                    <div style=\"flex: 1 1; min-width: 0;\">\n                                        {{ header }} \n                                    </div>\n                                    \n                                    @if (resolvedConfig().canAddColumn) {\n                                        <ui-button [tip]=\"'editable_table.add_column' | uicTranslate\" (click)=\"addColumAfert($index)\" icon=\"ri-insert-column-right\"  size=\"s\" [iconOnly]=\"true\"></ui-button> \n                                    }\n                                    @if (resolvedConfig().canDeleteColumn){\n                                        <ui-button [tip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\n                                    }\n                                    @if (resolvedConfig().resizeableColumns) {\n                                        <span\n                                            class=\"column-resize-handle\"\n                                            (pointerdown)=\"startColumnResize($event, $index)\"\n                                        ></span>\n                                    }\n\n                                </div>\n                            }\n                        </th>\n                    }\n                </tr>\n            </thead>\n            <tbody>\n                @for (row of visibleRows(); track $index; let i = $index) {\n                    <tr>\n                        @if (rowActions().length > 0) {\n                            <td class=\"action-col\">\n                                <div class=\"action-cell\">\n                                    <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n                                </div>\n                            </td>\n                        }\n                        @for (header of headers; track $index; let col = $index) {\n                            <td>\n                                <input\n                                    [disabled]=\"columnDisabledByHeader()[header]\"\n                                    [type]=\"columnInputTypeByHeader()[header]\"\n                                    [attr.data-row]=\"i\"\n                                    [attr.data-col]=\"col\"\n                                    [(ngModel)]=\"row[header]\"\n                                    (blur)=\"onCellBlur()\"\n                                    (keydown)=\"onCellKeydown($event, i, col)\">\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n        @if (hasMoreRows()) {\n            <div class=\"show-more\">\n                <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n                    {{'excel_table.see_more' | uicTranslate}}\n                </ui-button>\n            </div>\n        }\n        <div class=\"table-counter\">\n            {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n        </div>\n    } @else{\n        <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n    }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleRowsStep: [{
                 type: Input
             }], record: [{
@@ -7828,11 +7836,11 @@ class UicProgressBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicProgressBarComponent, isStandalone: true, selector: "ui-progress-bar", inputs: { progress: "progress", color: "color", height: "height" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicProgressBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\n</div>\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
+            args: [{ selector: 'ui-progress-bar', imports: [], template: "<div [class]=\"'progress-bar pb-' + color\" [style.--pb-height]=\"heightPx\">\r\n  <div class=\"progress-bar__fill\" [style.width.%]=\"displayProgress\"></div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;margin:0;padding:0}.progress-bar{--pb-height: 4px;--progress-fill: var(--primary-600);--progress-track: var(--primary-200);width:100%;height:var(--pb-height);margin:0;padding:0;box-sizing:border-box;border-radius:calc(var(--pb-height) / 2);background-color:var(--progress-track);overflow:hidden}.progress-bar__fill{display:block;height:100%;background-color:var(--progress-fill);border-radius:inherit;width:0%;transition:width .4s ease-in-out;will-change:width}.pb-primary{--progress-fill: var(--primary-600);--progress-track: var(--primary-200)}.pb-secondary{--progress-fill: var(--secondary-600);--progress-track: var(--secondary-200)}.pb-red{--progress-fill: var(--red-600);--progress-track: var(--red-200)}.pb-green{--progress-fill: var(--green-600);--progress-track: var(--green-200)}.pb-blue{--progress-fill: var(--blue-600);--progress-track: var(--blue-200)}.pb-yellow{--progress-fill: var(--yellow-600);--progress-track: var(--yellow-200)}.pb-black{--progress-fill: var(--grey-900);--progress-track: var(--grey-200)}.pb-grey{--progress-fill: var(--grey-600);--progress-track: var(--grey-200)}.pb-white{--progress-fill: var(--white);--progress-track: var(--grey-200)}\n"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], color: [{
@@ -8255,11 +8263,11 @@ class UicFieldOptionsEditorComponent {
         this.optionsChange.emit(this.options);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\r\n    <div class=\"optbody\">\r\n        <div class=\"option-row\">\r\n            <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\r\n            <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\r\n        </div>\r\n        @for (item of options; track $index) {\r\n            <div class=\"option-row\">\r\n                @if (true) {\r\n                    <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\r\n                }\r\n                <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\r\n                <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\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: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFieldOptionsEditorComponent, isStandalone: true, selector: "ui-field-options-editor", inputs: { options: "options" }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n    <div class=\"optbody\">\n        <div class=\"option-row\">\n            <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n            <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n        </div>\n        @for (item of options; track $index) {\n            <div class=\"option-row\">\n                @if (true) {\n                    <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n                }\n                <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n                <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n            </div>\n        }\n        <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n    </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\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: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFieldOptionsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\r\n    <div class=\"optbody\">\r\n        <div class=\"option-row\">\r\n            <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\r\n            <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\r\n        </div>\r\n        @for (item of options; track $index) {\r\n            <div class=\"option-row\">\r\n                @if (true) {\r\n                    <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\r\n                }\r\n                <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\r\n                <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\r\n    </div>\r\n</ui-input-wrapper>\r\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"] }]
+            args: [{ selector: 'ui-field-options-editor', imports: [FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], template: "<ui-input-wrapper [label]=\"'form_builder.options_editor.title' | uicTranslate\">\n    <div class=\"optbody\">\n        <div class=\"option-row\">\n            <div>{{'form_builder.options_editor.code_label' | uicTranslate}}</div>\n            <div>{{'form_builder.options_editor.name_label' | uicTranslate}}</div>\n        </div>\n        @for (item of options; track $index) {\n            <div class=\"option-row\">\n                @if (true) {\n                    <input (blur)=\"optionsChange.emit(options)\" [(ngModel)]=\"item.id\" [placeholder]=\"'form_builder.options_editor.code_placeholder' | uicTranslate\" type=\"text\">\n                }\n                <input [(ngModel)]=\"item.text\" (blur)=\"updateCode(item.text,$index)\" [placeholder]=\"'form_builder.options_editor.display_name_placeholder' | uicTranslate\" type=\"text\">\n                <ui-button (click)=\"dropOption($index)\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" [iconOnly]=\"true\" color=\"red\"></ui-button>\n            </div>\n        }\n        <ui-button (click)=\"addOption()\" color=\"black\" type=\"bordered\" icon=\"ri-add-line\" size=\"s\">{{'form_builder.options_editor.add_option' | uicTranslate}}</ui-button>\n    </div>\n</ui-input-wrapper>\n", styles: [".optbody{padding:10px;background-color:var(--grey-100);display:block;border-radius:10px;border:solid 1px var(--grey-200)}.option-row{display:flex;gap:3px}.option-row input{margin-bottom:8px;padding:5px;width:50%;border:solid 1px var(--grey-50);border-radius:5px}.option-row input:focus{border-color:var(--primary-500)}.option-row>div{width:50%;font-size:13px;font-weight:500;text-align:center;margin-bottom:8px}\n"] }]
         }], propDecorators: { optionsChange: [{
                 type: Output
             }], options: [{
@@ -8417,7 +8425,7 @@ class FieldEditorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptions()) {\r\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n    }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"advancedFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"styleFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">    \r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n    @if (localField().visibilityRules ) {\r\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n        <ui-form-wrapper\r\n            [fields]=\"branchFields\" \r\n            [initialValues]=\"branchInitialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\" \r\n            (formChange)=\"updateRuleValue($event)\">\r\n        </ui-form-wrapper>\r\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n    }\r\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
             type: Component,
@@ -8426,7 +8434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"requiredFields\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n    @if (hasOptions()) {\r\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\r\n    }\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"advancedFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">\r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\r\n    <ui-form-wrapper\r\n        [fields]=\"styleFields()\" \r\n        [initialValues]=\"initialValues()\"\r\n        [cols]=\"1\" \r\n        (formChange)=\"updateFieldValues($event)\">    \r\n    </ui-form-wrapper>\r\n</div>\r\n\r\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\r\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\r\n    @if (localField().visibilityRules ) {\r\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\r\n        <ui-form-wrapper\r\n            [fields]=\"branchFields\" \r\n            [initialValues]=\"branchInitialValues()\"\r\n            [externalData]=\"options()\"\r\n            [cols]=\"1\" \r\n            (formChange)=\"updateRuleValue($event)\">\r\n        </ui-form-wrapper>\r\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\r\n    }\r\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
+                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
@@ -8707,24 +8715,28 @@ class RuleDefinirionComponent {
                 name: 'description',
                 label: this.translate.translate('rule_builder.definition.form.description'),
                 type: 'text',
-                colSpan: 3
+                colSpan: 3,
+                required: true
             },
             {
                 name: 'fieldCode',
                 label: this.translate.translate('rule_builder.definition.form.field'),
                 type: 'select',
-                options: this.data.conditionFields
+                options: this.data.conditionFields,
+                required: true
             },
             {
                 name: 'operatorCode',
                 label: this.translate.translate('rule_builder.definition.form.operator'),
                 type: 'select',
-                options: this.data.conditionOperators
+                options: this.data.conditionOperators,
+                required: true
             },
             {
                 name: 'value',
                 label: this.translate.translate('rule_builder.definition.form.value'),
                 type: 'text',
+                required: true
             }
         ];
     }
@@ -8744,7 +8756,7 @@ class RuleDefinirionComponent {
             .replace(/'/g, '&#39;');
     }
     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: "\r\n@if (newRule) {\r\n    <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></ui-form-wrapper>\r\n    <div class=\"condition-btns\">\r\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\r\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\r\n    </div>\r\n} @else {\r\n    <div class=\"condition-searcher\">\r\n        <ui-input>\r\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\r\n        </ui-input>\r\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\r\n    </div>\r\n\r\n    @if (paginatedConditions.length > 0) {\r\n        @for (condition of paginatedConditions; track $index) {\r\n            <div class=\"condition\">\r\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\r\n                <div style=\"flex: 1 1;\">\r\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span>:</div>\r\n                    <div class=\"condition-body\">\r\n                        <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\r\n                        <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\r\n                        <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\r\n                    </div>\r\n                </div>\r\n                <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\r\n            </div>\r\n        }\r\n    } @else {\r\n        <div class=\"condition\">{{ 'rule_builder.definition.no_results' | uicTranslate }}</div>\r\n    }\r\n\r\n    <div class=\"condition-pagination\">\r\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\r\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\r\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\r\n    </div>\r\n}\r\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 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\">\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
             type: Component,
@@ -8754,7 +8766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicInputComponent,
                         UicButtonComponent,
                         UicTranslatePipe
-                    ], template: "\r\n@if (newRule) {\r\n    <ui-form-wrapper #formWrapper (formSubmit)=\"createAndSelectRule($event)\" [fields]=\"fields\" [cols]=\"3\"></ui-form-wrapper>\r\n    <div class=\"condition-btns\">\r\n        <ui-button icon=\"ri-arrow-left-line\" (click)=\"newRule = false\" color=\"black\" type=\"bordered\">{{ 'rule_builder.definition.cancel_and_back' | uicTranslate }}</ui-button>\r\n        <ui-button (click)=\"formWrapper.submit()\" icon=\"ri-check-line\" color=\"black\">{{ 'rule_builder.definition.create_and_select' | uicTranslate }}</ui-button>\r\n    </div>\r\n} @else {\r\n    <div class=\"condition-searcher\">\r\n        <ui-input>\r\n            <input [(ngModel)]=\"searchTerm\" (ngModelChange)=\"onSearchTermChange()\" [placeholder]=\"'rule_builder.definition.search_placeholder' | uicTranslate\" type=\"text\">\r\n        </ui-input>\r\n        <ui-button (click)=\"newRule = true\" color=\"black\">{{ 'rule_builder.definition.new_rule' | uicTranslate }}</ui-button>\r\n    </div>\r\n\r\n    @if (paginatedConditions.length > 0) {\r\n        @for (condition of paginatedConditions; track $index) {\r\n            <div class=\"condition\">\r\n                <i class=\"ri-align-item-horizontal-center-line\"></i>\r\n                <div style=\"flex: 1 1;\">\r\n                    <div class=\"condition-title\"><span [innerHTML]=\"highlightSearch(condition.description)\"></span>:</div>\r\n                    <div class=\"condition-body\">\r\n                        <span class=\"condition-field\" [innerHTML]=\"highlightSearch(condition.fieldName)\"></span>\r\n                        <span class=\"condition-operator\" [innerHTML]=\"highlightSearch(condition.operatorName)\"></span>\r\n                        <span class=\"condition-value\" [innerHTML]=\"highlightSearch(condition.value)\"></span>\r\n                    </div>\r\n                </div>\r\n                <ui-button (click)=\"select(condition)\" color=\"primary\" size=\"s\" type=\"bordered\">{{ 'common.select' | uicTranslate }}</ui-button>\r\n            </div>\r\n        }\r\n    } @else {\r\n        <div class=\"condition\">{{ 'rule_builder.definition.no_results' | uicTranslate }}</div>\r\n    }\r\n\r\n    <div class=\"condition-pagination\">\r\n        <ui-button [disabled]=\"!canGoToPreviousPage\" (click)=\"goToPreviousPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.previous' | uicTranslate }}</ui-button>\r\n        <div><b>{{ currentPage }}</b> / {{ totalPages }}</div>\r\n        <ui-button [disabled]=\"!canGoToNextPage\" (click)=\"goToNextPage()\" color=\"black\" size=\"s\" type=\"bordered\">{{ 'rule_builder.definition.next' | uicTranslate }}</ui-button>\r\n    </div>\r\n}\r\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 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\">\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -8847,6 +8859,7 @@ class UicRuleBuilderComponent {
     ruleDefinition = [];
     translate = inject(UicTranslateService);
     modal = inject(UicModalService);
+    tinyAlert = inject(UicTinyAlertService);
     get resolvedTitle() {
         return this.title || this.translate.translate('rule_builder.title');
     }
@@ -8901,7 +8914,12 @@ class UicRuleBuilderComponent {
         });
     }
     print() {
-        this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
+        const normalizedRules = this.normalizeRules(this.cloneRules(this.ruleDefinition));
+        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;
@@ -8910,11 +8928,10 @@ class UicRuleBuilderComponent {
     }
     reset() {
         this.ruleDefinition = this.getRulesFromInitialValue();
-        this.ruleDefinitionChange.emit(this.buildRuleOutput());
         this.editing = false;
     }
     getOutput() {
-        this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
+        this.ruleDefinition = this.normalizeRules(this.cloneRules(this.ruleDefinition));
         return this.buildRuleOutput();
     }
     getConditionLabel(value) {
@@ -8928,7 +8945,7 @@ class UicRuleBuilderComponent {
         return this.translate.translate(translationKey);
     }
     appendExpression(rules, expression) {
-        const normalizedRules = this.normalizeRules(rules);
+        const normalizedRules = this.normalizeRules(rules, true);
         rules.length = 0;
         rules.push(...normalizedRules);
         if (rules.length > 0) {
@@ -8937,7 +8954,7 @@ class UicRuleBuilderComponent {
         rules.push(expression);
     }
     syncRuleDefinition() {
-        this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
+        this.ruleDefinition = this.normalizeRules(this.ruleDefinition, true);
     }
     createConditionRule() {
         return {
@@ -8969,14 +8986,35 @@ class UicRuleBuilderComponent {
             return [];
         });
     }
-    normalizeRules(rules) {
+    hasOperators(rules) {
+        return rules.some(rule => {
+            if (rule.type === 'operator') {
+                return true;
+            }
+            if (rule.type === 'group' && rule.rules) {
+                return this.hasOperators(rule.rules);
+            }
+            return false;
+        });
+    }
+    normalizeRules(rules, preserveIncompleteUnsaved = false) {
         const normalized = [];
         let expectsExpression = true;
         for (const rule of rules) {
             if (rule.type === 'condition') {
                 const rawValue = rule.value;
                 const normalizedValue = typeof rawValue === 'string' ? rawValue.trim() : rawValue;
-                if (normalizedValue == null || normalizedValue === '' || !expectsExpression) {
+                if (!expectsExpression) {
+                    continue;
+                }
+                if (normalizedValue == null || normalizedValue === '') {
+                    if (preserveIncompleteUnsaved && rule.unsaved) {
+                        normalized.push({
+                            ...rule,
+                            value: normalizedValue
+                        });
+                        expectsExpression = false;
+                    }
                     continue;
                 }
                 rule.value = normalizedValue;
@@ -8985,7 +9023,7 @@ class UicRuleBuilderComponent {
                 continue;
             }
             if (rule.type === 'group') {
-                const groupRules = this.normalizeRules(rule.rules ?? []);
+                const groupRules = this.normalizeRules(rule.rules ?? [], preserveIncompleteUnsaved);
                 if (groupRules.length === 0 || !this.isExpression(groupRules[0]) || !expectsExpression) {
                     continue;
                 }
@@ -9009,6 +9047,12 @@ class UicRuleBuilderComponent {
         }
         return normalized;
     }
+    cloneRules(rules) {
+        return rules.map(rule => ({
+            ...rule,
+            rules: rule.rules ? this.cloneRules(rule.rules) : undefined
+        }));
+    }
     buildExpression(rules) {
         return this.normalizeRules(rules)
             .map(rule => {
@@ -9162,7 +9206,7 @@ class UicRuleBuilderComponent {
         this.nextTemporalConditionId = nextId + 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", title: "title", initValue: "initValue" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange" }, ngImport: i0, template: "<div class=\"rule-tools\">\n    <h3>\n        {{resolvedTitle}}\n    </h3>\n    @if (editing) {\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>\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>\n    }@else {\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>\n    }\n</div>\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\n    <div class=\"rule-container-workspace\">\n        @if (editing) {\n            <ng-container\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n            </ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\n        }\n        @if (ruleDefinition.length==0) {\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n        }\n    </div>\n    @if (editing) {\n        <div class=\"rule-btns\">\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n        </div>\n    }\n</div>\n\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n    @for (rule of rules; track $index; let i = $index) {\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 class=\"condition-box\">{{ conditionLabels[rule.value] || rule.value }}</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') {\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n                (click)=\"changeOperator(rules, i)\"\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\n                {{ getOperatorLabel(rule.value) }}\n            </div>\n        }\n        @if (rule.type === 'group') {\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div class=\"rule-groups-tools\">\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>\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>\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>\n                </div>\n                <div class=\"rule-groups-items\">\n                    <ng-container\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n                    </ng-container>\n                </div>\n            </div>\n        }\n    }\n</ng-template>\n\n<ng-template #readOnlyTemplate>\n    @if (ruleDefinition.length > 0) {\n        <div class=\"rule-friendly-output\">\n            <ng-container\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n            </ng-container>\n        </div>\n    }\n</ng-template>\n\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n    <div class=\"readonly\">\n        @if (isGroup) {\n            <div class=\"readonly-group\">(</div>\n        }\n    \n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\n            }\n    \n            @if (rule.type === 'operator') {\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\n            }\n    \n            @if (rule.type === 'group') {\n                <div class=\"readonly-group\">\n                    <ng-container\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n                    </ng-container>\n                </div>\n            }\n        }\n    \n        @if (isGroup) {\n            <div class=\"readonly-group\">)</div>\n        }\n    </div>\n</ng-template>\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", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
@@ -9173,7 +9217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicToolTipDirective,
                         UicTranslatePipe
-                    ], template: "<div class=\"rule-tools\">\n    <h3>\n        {{resolvedTitle}}\n    </h3>\n    @if (editing) {\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>\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>\n    }@else {\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>\n    }\n</div>\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\n    <div class=\"rule-container-workspace\">\n        @if (editing) {\n            <ng-container\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n            </ng-container>\n        } @else {\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\n        }\n        @if (ruleDefinition.length==0) {\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n        }\n    </div>\n    @if (editing) {\n        <div class=\"rule-btns\">\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n        </div>\n    }\n</div>\n\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n    @for (rule of rules; track $index; let i = $index) {\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 class=\"condition-box\">{{ conditionLabels[rule.value] || rule.value }}</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') {\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n                (click)=\"changeOperator(rules, i)\"\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\n                {{ getOperatorLabel(rule.value) }}\n            </div>\n        }\n        @if (rule.type === 'group') {\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\n                <div class=\"rule-groups-tools\">\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>\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>\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>\n                </div>\n                <div class=\"rule-groups-items\">\n                    <ng-container\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n                    </ng-container>\n                </div>\n            </div>\n        }\n    }\n</ng-template>\n\n<ng-template #readOnlyTemplate>\n    @if (ruleDefinition.length > 0) {\n        <div class=\"rule-friendly-output\">\n            <ng-container\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n            </ng-container>\n        </div>\n    }\n</ng-template>\n\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\n    <div class=\"readonly\">\n        @if (isGroup) {\n            <div class=\"readonly-group\">(</div>\n        }\n    \n        @for (rule of rules; track $index) {\n            @if (rule.type === 'condition') {\n                <div class=\"readonly-condition\">{{ getConditionLabel(rule.value) }}</div>\n            }\n    \n            @if (rule.type === 'operator') {\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\n            }\n    \n            @if (rule.type === 'group') {\n                <div class=\"readonly-group\">\n                    <ng-container\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\n                    </ng-container>\n                </div>\n            }\n        }\n    \n        @if (isGroup) {\n            <div class=\"readonly-group\">)</div>\n        }\n    </div>\n</ng-template>\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: "<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"] }]
         }], propDecorators: { conditions: [{
                 type: Input
             }], conditionOperators: [{