ui-core-abv 0.6.31 → 0.6.33

package/fesm2022/ui-core-abv.mjs

@@ -312,13 +312,36 @@ const DICTIONARY_EN = {
         add_group: 'Group',
         add_group_tip: 'Add group',
         reset: 'Reset',
-        reset_tip: 'Clear rule builder',
+        reset_tip: 'Discard unsaved changes',
         save: 'Save',
         save_tip: 'Save built rule',
         delete_rule_tip: 'Delete rule',
         delete_group_tip: 'Delete group',
         toggle_operator_tip: 'Click to change operator',
         no_rules: 'No rules defined',
+        rules_management: 'Select rule',
+        edit: 'Edit',
+        edit_tip: 'Edit rule',
+        edit_condition_tip: 'Click to edit condition',
+        operators: {
+            and: 'AND',
+            or: 'OR',
+        },
+        definition: {
+            cancel_and_back: 'Cancel and go back',
+            create_and_select: 'Create and select',
+            search_placeholder: 'Search condition',
+            new_rule: 'New rule',
+            no_results: 'No conditions found',
+            previous: 'Previous',
+            next: 'Next',
+            form: {
+                description: 'Description',
+                field: 'Field',
+                operator: 'Operator',
+                value: 'Value',
+            },
+        },
     },
     step_form: {
         back: 'Back',
@@ -567,13 +590,36 @@ const DICTIONARY_ES = {
         add_group: 'Grupo',
         add_group_tip: 'Agregar grupo',
         reset: 'Reiniciar',
-        reset_tip: 'Limpiar constructor de reglas',
+        reset_tip: 'Descartar cambios no guardados',
         save: 'Guardar',
         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_tip: 'Editar regla',
+        edit_condition_tip: 'Click para editar la condición',
+        operators: {
+            and: 'Y',
+            or: 'O',
+        },
+        definition: {
+            cancel_and_back: 'Cancelar y volver',
+            create_and_select: 'Crear y seleccionar',
+            search_placeholder: 'Buscar condición',
+            new_rule: 'Nueva regla',
+            no_results: 'No se encontraron condiciones',
+            previous: 'Anterior',
+            next: 'Siguiente',
+            form: {
+                description: 'Descripción',
+                field: 'Campo',
+                operator: 'Operador',
+                value: 'Valor',
+            },
+        },
     },
     step_form: {
         back: 'Volver',
@@ -1538,7 +1584,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\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}.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}@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\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}.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}@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,
@@ -1548,7 +1594,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\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}.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}@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\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}.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}@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: [{
@@ -3815,7 +3861,7 @@ class UicDynamicFormComponent {
         recognition.start();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\n  @for (state of visibleFieldStates(); track state.field.name) {\n    @let field = state.field;\n    @let control = state.control;\n    @let currentValue = state.value ?? '';\n    @let error = getControlErrorMessages(control, field)[0];\n\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\n      @if (['text', 'number'].includes(field.type)) {\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!control?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\">\n          <input #inp\n            [id]=\"field.name\"\n            [formControlName]=\"field.name\"\n            [type]=\"field.type\"\n            [step]=\"field.step\"\n            [min]=\"field.min\"\n            [max]=\"field.max\"\n            [minLength]=\"field.minLength||null\"\n            [maxlength]=\"field.maxLength||null\"\n            [placeholder]=\"field.placeholder??field.label\"/>\n          @if (field.maxLength && field.showCounter) {\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\n          }\n        </ui-input>\n      }\n      @if (field.type === 'textarea') {\n        <ui-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!control?.disabled\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\">\n          <textarea #ta\n            [id]=\"field.name\"\n            [formControlName]=\"field.name\"\n            [minLength]=\"field.minLength||null\"\n            [maxlength]=\"field.maxLength||null\"\n            [textareaAutoresize]=\"field.textareaResize\"\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\n            [rows]=\"field.resizeMinRows??3\"\n            [placeholder]=\"field.placeholder??field.label\"\n          ></textarea>\n          @if (field.voiceToTextEnabled && !control?.disabled) {\n            @let listening = isListening(field.name);\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\n              <ui-button\n                [disabled]=\"listening\"\n                style=\"margin-bottom: 2px;\"\n                (click)=\"voiceToText(ta, field.name)\"\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\n                [type]=\"listening?'filled':'bordered'\"\n                size=\"s\"\n                [iconOnly]=\"true\"\n              ></ui-button>\n              @if (listening) {\n                <i class=\"ri-voiceprint-line\"></i>\n              }\n            </div>\n          }\n          @if (field.showCounter) {\n            <span counter>\n              {{ta.value.length}}\n              @if (field.maxLength) {\n                /{{field.maxLength}}\n              }\n            </span>\n          }\n        </ui-input>\n      }\n      @if (field.type === 'phone') {\n        <ui-phone-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [placeholder]=\"field.placeholder||field.label||''\"\n        >\n        </ui-phone-input>\n      }\n      @else if (field.type === 'date') {\n        <ui-date-picker\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [justMonth]=\"!!field.monthMode\"\n          [min]=\"field.minDate??''\"\n          [max]=\"field.maxDate??''\"\n          [monthDay]=\"field.monthDay||'first'\"\n          [formControlName]=\"field.name\"\n        ></ui-date-picker>\n      }\n      @else if (field.type === 'time') {\n        <ui-time-picker\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [interval]=\"field.timeInterval??5\"\n          [formControlName]=\"field.name\"\n        ></ui-time-picker>\n      }\n      @else if (field.type === 'select') {\n        <ui-select\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-select>\n      }\n      @else if (field.type === 'multyselect') {\n        <ui-multy-select\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-multy-select>\n      }\n      @else if (field.type === 'searcher') {\n        <ui-searcher\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [searchFn]=\"getSearcherFn(field)\"\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\n          [error]=\"error\"\n        ></ui-searcher>\n      }\n      @else if (field.type === 'file') {\n        <ui-file-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [fileTypes]=\"field.fileTypes??null\"\n          [formControlName]=\"field.name\"\n        ></ui-file-input>\n      }\n      @else if (['checkbox', 'switch'].includes(field.type)) {\n        <ui-checkbox\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [placeholder]=\"field.placeholder??''\"\n          [tip]=\"field.tip??''\"\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\n        ></ui-checkbox>\n      }\n      @else if (field.type === 'radio') {\n        <ui-radio\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [tip]=\"field.tip??''\"\n          [loading]=\"field.loading??false\"\n          [error]=\"error\"\n          [options]=\"field.options || []\"\n        ></ui-radio>\n      }\n      @else if (field.type === 'slider') {\n        <ui-slider\n          [min]=\"field.min??0\"\n          [max]=\"field.max??100\"\n          [step]=\"field.sliderInterval??1\"\n          [markerCount]=\"field.sliderMarks??5\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [tip]=\"field.tip??''\"\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n        ></ui-slider>\n      }\n      @else if (field.type === 'pool') {\n        <ui-pool-options\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\n          [enabledListView]=\"field.poolEnabledListView||false\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-pool-options>\n      }\n    </div>\n  }\n</div>\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "minimumSearchLength", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { kind: "directive", type: UicTextareaAutoresizeDirective, selector: "[textareaAutoresize]", inputs: ["minRows", "maxRows", "textareaAutoresize"] }, { kind: "directive", type: UicTextareaAutoresizeMinRowsDirective, selector: "[textareaAutoresizeMinRows]", inputs: ["textareaAutoresizeMinRows"] }, { kind: "directive", type: UicTextareaAutoresizeMaxRowsDirective, selector: "[textareaAutoresizeMaxRows]", inputs: ["textareaAutoresizeMaxRows"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -3839,7 +3885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicCheckboxComponent,
                         UicPhoneInputComponent,
                         FormsModule
-                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\n  @for (state of visibleFieldStates(); track state.field.name) {\n    @let field = state.field;\n    @let control = state.control;\n    @let currentValue = state.value ?? '';\n    @let error = getControlErrorMessages(control, field)[0];\n\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\n      @if (['text', 'number'].includes(field.type)) {\n        @let inputColor = getInputColor(field, currentValue);\n        <ui-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!control?.disabled\"\n          [internalIconColor]=\"inputColor\"\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\">\n          <input #inp\n            [id]=\"field.name\"\n            [formControlName]=\"field.name\"\n            [type]=\"field.type\"\n            [step]=\"field.step\"\n            [min]=\"field.min\"\n            [max]=\"field.max\"\n            [minLength]=\"field.minLength||null\"\n            [maxlength]=\"field.maxLength||null\"\n            [placeholder]=\"field.placeholder??field.label\"/>\n          @if (field.maxLength && field.showCounter) {\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\n          }\n        </ui-input>\n      }\n      @if (field.type === 'textarea') {\n        <ui-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [disabled]=\"!!control?.disabled\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\">\n          <textarea #ta\n            [id]=\"field.name\"\n            [formControlName]=\"field.name\"\n            [minLength]=\"field.minLength||null\"\n            [maxlength]=\"field.maxLength||null\"\n            [textareaAutoresize]=\"field.textareaResize\"\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\n            [rows]=\"field.resizeMinRows??3\"\n            [placeholder]=\"field.placeholder??field.label\"\n          ></textarea>\n          @if (field.voiceToTextEnabled && !control?.disabled) {\n            @let listening = isListening(field.name);\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\n              <ui-button\n                [disabled]=\"listening\"\n                style=\"margin-bottom: 2px;\"\n                (click)=\"voiceToText(ta, field.name)\"\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\n                [type]=\"listening?'filled':'bordered'\"\n                size=\"s\"\n                [iconOnly]=\"true\"\n              ></ui-button>\n              @if (listening) {\n                <i class=\"ri-voiceprint-line\"></i>\n              }\n            </div>\n          }\n          @if (field.showCounter) {\n            <span counter>\n              {{ta.value.length}}\n              @if (field.maxLength) {\n                /{{field.maxLength}}\n              }\n            </span>\n          }\n        </ui-input>\n      }\n      @if (field.type === 'phone') {\n        <ui-phone-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [placeholder]=\"field.placeholder||field.label||''\"\n        >\n        </ui-phone-input>\n      }\n      @else if (field.type === 'date') {\n        <ui-date-picker\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [justMonth]=\"!!field.monthMode\"\n          [min]=\"field.minDate??''\"\n          [max]=\"field.maxDate??''\"\n          [monthDay]=\"field.monthDay||'first'\"\n          [formControlName]=\"field.name\"\n        ></ui-date-picker>\n      }\n      @else if (field.type === 'time') {\n        <ui-time-picker\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [interval]=\"field.timeInterval??5\"\n          [formControlName]=\"field.name\"\n        ></ui-time-picker>\n      }\n      @else if (field.type === 'select') {\n        <ui-select\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-select>\n      }\n      @else if (field.type === 'multyselect') {\n        <ui-multy-select\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [tip]=\"field.tip??''\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-multy-select>\n      }\n      @else if (field.type === 'searcher') {\n        <ui-searcher\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [tip]=\"field.tip??''\"\n          [searchFn]=\"getSearcherFn(field)\"\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\n          [error]=\"error\"\n        ></ui-searcher>\n      }\n      @else if (field.type === 'file') {\n        <ui-file-input\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [internalIcon]=\"field.internalIcon??''\"\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [fileTypes]=\"field.fileTypes??null\"\n          [formControlName]=\"field.name\"\n        ></ui-file-input>\n      }\n      @else if (['checkbox', 'switch'].includes(field.type)) {\n        <ui-checkbox\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [placeholder]=\"field.placeholder??''\"\n          [tip]=\"field.tip??''\"\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\n        ></ui-checkbox>\n      }\n      @else if (field.type === 'radio') {\n        <ui-radio\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [tip]=\"field.tip??''\"\n          [loading]=\"field.loading??false\"\n          [error]=\"error\"\n          [options]=\"field.options || []\"\n        ></ui-radio>\n      }\n      @else if (field.type === 'slider') {\n        <ui-slider\n          [min]=\"field.min??0\"\n          [max]=\"field.max??100\"\n          [step]=\"field.sliderInterval??1\"\n          [markerCount]=\"field.sliderMarks??5\"\n          [id]=\"field.name\"\n          [formControlName]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [tip]=\"field.tip??''\"\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n        ></ui-slider>\n      }\n      @else if (field.type === 'pool') {\n        <ui-pool-options\n          [error]=\"error\"\n          [label]=\"field.label + (field.required ? ' *' : '')\"\n          [id]=\"field.name\"\n          [icon]=\"field.icon??''\"\n          [loading]=\"field.loading??false\"\n          [multy]=\"field.multyEnabled??false\"\n          [tip]=\"field.tip??''\"\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\n          [enabledListView]=\"field.poolEnabledListView||false\"\n          [formControlName]=\"field.name\"\n          [options]=\"field.options || []\"\n        ></ui-pool-options>\n      }\n    </div>\n  }\n</div>\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
+                    ], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (state of visibleFieldStates(); track state.field.name) {\r\n    @let field = state.field;\r\n    @let control = state.control;\r\n    @let currentValue = state.value ?? '';\r\n    @let error = getControlErrorMessages(control, field)[0];\r\n\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      @if (['text', 'number'].includes(field.type)) {\r\n        @let inputColor = getInputColor(field, currentValue);\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"inputColor\"\r\n          [internalIcon]=\"field.internalIcon || (currentValue !== '' ? getIconByColor(field, inputColor) : '')\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <input #inp\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [type]=\"field.type\"\r\n            [step]=\"field.step\"\r\n            [min]=\"field.min\"\r\n            [max]=\"field.max\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [placeholder]=\"field.placeholder??field.label\"/>\r\n          @if (field.maxLength && field.showCounter) {\r\n            <span counter>{{inp.value.length}} /{{field.maxLength}}</span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'textarea') {\r\n        <ui-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!control?.disabled\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\">\r\n          <textarea #ta\r\n            [id]=\"field.name\"\r\n            [formControlName]=\"field.name\"\r\n            [minLength]=\"field.minLength||null\"\r\n            [maxlength]=\"field.maxLength||null\"\r\n            [textareaAutoresize]=\"field.textareaResize\"\r\n            [textareaAutoresizeMinRows]=\"field.resizeMinRows??1\"\r\n            [textareaAutoresizeMaxRows]=\"field.resizeMaxRows??5\"\r\n            [rows]=\"field.resizeMinRows??3\"\r\n            [placeholder]=\"field.placeholder??field.label\"\r\n          ></textarea>\r\n          @if (field.voiceToTextEnabled && !control?.disabled) {\r\n            @let listening = isListening(field.name);\r\n            <div class=\"speak-icon\" (click)=\"ta.focus()\">\r\n              <ui-button\r\n                [disabled]=\"listening\"\r\n                style=\"margin-bottom: 2px;\"\r\n                (click)=\"voiceToText(ta, field.name)\"\r\n                [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n                [type]=\"listening?'filled':'bordered'\"\r\n                size=\"s\"\r\n                [iconOnly]=\"true\"\r\n              ></ui-button>\r\n              @if (listening) {\r\n                <i class=\"ri-voiceprint-line\"></i>\r\n              }\r\n            </div>\r\n          }\r\n          @if (field.showCounter) {\r\n            <span counter>\r\n              {{ta.value.length}}\r\n              @if (field.maxLength) {\r\n                /{{field.maxLength}}\r\n              }\r\n            </span>\r\n          }\r\n        </ui-input>\r\n      }\r\n      @if (field.type === 'phone') {\r\n        <ui-phone-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder||field.label||''\"\r\n        >\r\n        </ui-phone-input>\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [justMonth]=\"!!field.monthMode\"\r\n          [min]=\"field.minDate??''\"\r\n          [max]=\"field.maxDate??''\"\r\n          [monthDay]=\"field.monthDay||'first'\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'time') {\r\n        <ui-time-picker\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [interval]=\"field.timeInterval??5\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-time-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'multyselect') {\r\n        <ui-multy-select\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-multy-select>\r\n      }\r\n      @else if (field.type === 'searcher') {\r\n        <ui-searcher\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [searchFn]=\"getSearcherFn(field)\"\r\n          [itemDisplayFn]=\"getSearcherDisplayFn(field)\"\r\n          [itemIsEnabledFn]=\"getSearcherIsEnabledFn(field)\"\r\n          [placeholder]=\"field.placeholder??'common.search_ellipsis'\"\r\n          [error]=\"error\"\r\n        ></ui-searcher>\r\n      }\r\n      @else if (field.type === 'file') {\r\n        <ui-file-input\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [internalIcon]=\"field.internalIcon??''\"\r\n          [internalIconColor]=\"field.internalIconColor??'grey'\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [fileTypes]=\"field.fileTypes??null\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-file-input>\r\n      }\r\n      @else if (['checkbox', 'switch'].includes(field.type)) {\r\n        <ui-checkbox\r\n          [label]=\"(field.label??'') + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'radio') {\r\n        <ui-radio\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [error]=\"error\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-radio>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'pool') {\r\n        <ui-pool-options\r\n          [error]=\"error\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [multy]=\"field.multyEnabled??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [listViewTitle]=\"field.poolTitle??'common.selected'\"\r\n          [enabledListView]=\"field.poolEnabledListView||false\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-pool-options>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:.75rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.speak-icon{display:flex;width:100%;align-items:center;gap:10px}.speak-icon i{font-size:20px;color:var(--primary-500)}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
                 type: Input
             }], form: [{
@@ -4575,7 +4621,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: "\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 }] });
+        ], 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
             type: Component,
@@ -4584,7 +4630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: DROPDOWN_OVERLAY_CONTROLS,
                             useExisting: forwardRef(() => UicDropdownContainerComponent),
                         },
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { buttonLabel: [{
                 type: Input
             }], disabled: [{
@@ -4982,11 +5028,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>\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" }] });
+    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" }] });
 }
 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>\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"] }]
+            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"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], options: [{
@@ -5113,7 +5159,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>\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>\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
@@ -5121,7 +5167,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>\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>\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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -5171,11 +5217,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()\">   \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] });
+    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] });
 }
 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()\">   \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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -6013,11 +6059,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\">\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"] }] });
+    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"] }] });
 }
 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\">\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"] }]
+            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"] }]
         }], propDecorators: { cards: [{
                 type: Input
             }], gap: [{
@@ -7404,7 +7450,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\">\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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, decorators: [{
             type: Component,
@@ -7415,7 +7461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicTranslatePipe,
                         UicToolTipDirective
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleRowsStep: [{
                 type: Input
             }], record: [{
@@ -7698,11 +7744,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\">\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"] });
+    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"] });
 }
 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\">\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"] }]
+            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"] }]
         }], propDecorators: { progress: [{
                 type: Input
             }], color: [{
@@ -8111,11 +8157,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\">\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" }] });
+    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" }] });
 }
 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\">\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"] }]
+            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"] }]
         }], propDecorators: { optionsChange: [{
                 type: Output
             }], options: [{
@@ -8273,7 +8319,7 @@ class FieldEditorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"], dependencies: [{ kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "fields", "cols", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicFieldOptionsEditorComponent, selector: "ui-field-options-editor", inputs: ["options"], outputs: ["optionsChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldEditorComponent, isStandalone: true, selector: "lib-field-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldEditorComponent, decorators: [{
             type: Component,
@@ -8282,7 +8328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         UicTranslatePipe,
                         UicFieldOptionsEditorComponent
-                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('basic')\">\n    <ui-form-wrapper\n        [fields]=\"requiredFields\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n    @if (hasOptions()) {\n        <ui-field-options-editor [options]=\"localField().options ?? []\" (optionsChange)=\"updateOptions($event)\"></ui-field-options-editor>\n    }\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.advanced' | uicTranslate}} <i (click)=\"toggleSection('advanced')\" class=\"{{hiddenSections().includes('advanced') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('advanced')\">\n    <ui-form-wrapper\n        [fields]=\"advancedFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">\n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.style' | uicTranslate}} <i (click)=\"toggleSection('style')\" class=\"{{hiddenSections().includes('style') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('style')\">\n    <ui-form-wrapper\n        [fields]=\"styleFields()\" \n        [initialValues]=\"initialValues()\"\n        [cols]=\"1\" \n        (formChange)=\"updateFieldValues($event)\">    \n    </ui-form-wrapper>\n</div>\n\n<div class=\"props-title\">{{'form_builder.field_editor.dependency_title' | uicTranslate}} <i (click)=\"toggleSection('dependency')\" class=\"{{hiddenSections().includes('dependency') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\n<div class=\"props-inputs\" [class.hidden]=\"hiddenSections().includes('dependency')\">\n    @if (localField().visibilityRules ) {\n        <p>{{'form_builder.field_editor.dependency_description' | uicTranslate}}</p>\n        <ui-form-wrapper\n            [fields]=\"branchFields\" \n            [initialValues]=\"branchInitialValues()\"\n            [externalData]=\"options()\"\n            [cols]=\"1\" \n            (formChange)=\"updateRuleValue($event)\">\n        </ui-form-wrapper>\n        <ui-button color=\"black\" size=\"s\" (click)=\"removeRule()\">{{'form_builder.field_editor.remove_relation' | uicTranslate}}</ui-button>\n    }@else {\n        <ui-button color=\"black\" size=\"s\" (click)=\"addRule()\">{{'form_builder.field_editor.add_relation' | uicTranslate}}</ui-button>\n    }\n</div>", styles: [".hidden{display:none}.props-title{font-size:14px;font-weight:600;margin-bottom:8px;background:var(--grey-200);padding:5px;border-radius:5px;display:flex;justify-content:space-between}.props-title i{cursor:pointer}.props-inputs{padding-left:20px;margin-bottom:10px}p{font-size:14px;margin:10px 0;color:var(--yellow-800)}\n"] }]
+                    ], template: "<div class=\"props-title\">{{'form_builder.field_editor.basic' | uicTranslate}} <i (click)=\"toggleSection('basic')\" class=\"{{hiddenSections().includes('basic') ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'}}\"></i> </div>\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"] }]
         }], ctorParameters: () => [] });
 
 class FieldTypeSelectorComponent {
@@ -8466,25 +8512,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], template: "<div class=\"formeditor\">\r\n    <div class=\"formeditor-header\">\r\n        <div style=\"flex: 1 1;\">\r\n            Creando nuevo formulario\r\n        </div>\r\n        <ui-button color=\"black\" type=\"bordered\" icon=\"ri-eye-line\" [text]=\"'form_builder.preview_form' | uicTranslate\" (click)=\"printForm()\"></ui-button>\r\n        <ui-button color=\"black\" icon=\"ri-check-line\" [text]=\"'form_builder.submit_form' | uicTranslate\" (click)=\"submitForm()\"></ui-button>\r\n    </div>\r\n    <div class=\"formeditor-body\">\r\n\r\n        <!-- BLOCKS -->\r\n        <div class=\"formeditor-overflow\">\r\n            <div class=\"formeditor-workarea\">\r\n                <ui-input label=\"Columnas\">\r\n                    <input [(ngModel)]=\"cols\">\r\n                </ui-input>\r\n                @for (block of editableBlocks(); track block.id; let i = $index) {\r\n                    <lib-block-editor \r\n                        [block]=\"block\"\r\n                        [selectedFieldId]=\"selectedField()?.id ?? null\"\r\n                        (blockChange)=\"onBlockChange(i, $event)\"\r\n                        (notifySelectedField)=\"selectedField.set($event)\"\r\n                        (deleteBlock)=\"deleteBlock(block.id)\">\r\n                    </lib-block-editor>\r\n                }\r\n                <ui-button type=\"bordered\" icon=\"ri-add-line\" color=\"black\" [text]=\"'form_builder.add_block' | uicTranslate\" (click)=\"addBlock()\"></ui-button>\r\n            </div>\r\n        </div>\r\n        <!-- PROPERTIES -->\r\n        <div class=\"formeditor-properties\">\r\n            <h3>Propiedades</h3>\r\n            <div class=\"formeditor-properties-form\">\r\n                @if (selectedField()) {\r\n                    <lib-field-editor \r\n                        [config]=\"selectedField()!\"\r\n                        [options]=\"dependencyOptions()\"\r\n                        (fieldChange)=\"onFieldChange($event)\">\r\n                    </lib-field-editor>\r\n                }@else{\r\n                    <div class=\"no-selected-field\">\r\n                        <i class=\"ri-edit-box-line\"></i>\r\n                        <p>{{'form_builder.select_field_to_edit' | uicTranslate}}</p>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".formeditor{display:flex;flex-direction:column;overflow:hidden;background-color:var(--grey-100);border:solid 1px var(--grey-300);border-radius:5px;max-height:500px}.formeditor-header{background-color:#fff;padding:5px 10px;align-items:center;display:flex;gap:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-body{display:flex;gap:10px;overflow:hidden;padding:10px}.formeditor-overflow{padding:5px;flex:1 1;overflow:auto}.formeditor-workarea{display:flex;flex-direction:column;gap:15px;height:fit-content}.formeditor-properties{width:250px;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);border-radius:5px}.formeditor-properties>h3{padding:10px;border-bottom:solid 1px var(--grey-300)}.formeditor-properties-form{padding:10px;overflow:auto}.no-selected-field{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;font-size:13px;gap:15px;text-align:center;color:var(--grey-400)}.no-selected-field i{font-size:24px}\n"] }]
         }] });
 
+class RuleDefinirionComponent {
+    data;
+    newRule = false;
+    fields;
+    conditions = [];
+    searchTerm = '';
+    currentPage = 1;
+    pageSize = 5;
+    translate = inject(UicTranslateService);
+    ref = inject(UiModalRef);
+    languageSubscription;
+    constructor(data) {
+        this.data = data;
+        this.conditions = data.conditions;
+        this.fields = this.buildFields();
+        this.languageSubscription = this.translate.language$.subscribe(() => {
+            this.fields = this.buildFields();
+        });
+    }
+    ngOnDestroy() {
+        this.languageSubscription.unsubscribe();
+    }
+    get filteredConditions() {
+        const normalizedSearch = this.normalizeText(this.searchTerm);
+        if (!normalizedSearch) {
+            return this.conditions;
+        }
+        return this.conditions.filter(condition => this.normalizeText(condition.description).includes(normalizedSearch) ||
+            this.normalizeText(condition.fieldName).includes(normalizedSearch) ||
+            this.normalizeText(condition.fieldCode).includes(normalizedSearch) ||
+            this.normalizeText(condition.operatorName).includes(normalizedSearch) ||
+            this.normalizeText(condition.operatorCode).includes(normalizedSearch) ||
+            this.normalizeText(condition.value).includes(normalizedSearch));
+    }
+    get paginatedConditions() {
+        const start = (this.currentPage - 1) * this.pageSize;
+        return this.filteredConditions.slice(start, start + this.pageSize);
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.filteredConditions.length / this.pageSize));
+    }
+    get canGoToPreviousPage() {
+        return this.currentPage > 1;
+    }
+    get canGoToNextPage() {
+        return this.currentPage < this.totalPages;
+    }
+    onSearchTermChange() {
+        this.currentPage = 1;
+    }
+    goToPreviousPage() {
+        if (!this.canGoToPreviousPage) {
+            return;
+        }
+        this.currentPage -= 1;
+    }
+    goToNextPage() {
+        if (!this.canGoToNextPage) {
+            return;
+        }
+        this.currentPage += 1;
+    }
+    createAndSelectRule(fr) {
+        if (fr.result && fr.form) {
+            const fieldCode = fr.form['fieldCode'];
+            const operatoCode = fr.form['operatorCode'];
+            const nf = {
+                id: 0,
+                description: fr.form['description'],
+                fieldCode: fieldCode,
+                fieldName: this.data.conditionFields.find(f => f.id === fieldCode)?.text ?? '',
+                operatorCode: operatoCode,
+                operatorName: this.data.conditionOperators.find(o => o.id === operatoCode)?.text ?? '',
+                value: fr.form['value']
+            };
+            this.ref.closeFloating(nf);
+        }
+    }
+    select(condition) {
+        this.ref.closeFloating(condition);
+    }
+    highlightSearch(value) {
+        const text = String(value ?? '');
+        const query = this.searchTerm.trim();
+        if (!query) {
+            return this.escapeHtml(text);
+        }
+        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedQuery})`, 'gi');
+        return this.escapeHtml(text).replace(regex, '<mark>$1</mark>');
+    }
+    buildFields() {
+        return [
+            {
+                name: 'description',
+                label: this.translate.translate('rule_builder.definition.form.description'),
+                type: 'text',
+                colSpan: 3
+            },
+            {
+                name: 'fieldCode',
+                label: this.translate.translate('rule_builder.definition.form.field'),
+                type: 'select',
+                options: this.data.conditionFields
+            },
+            {
+                name: 'operatorCode',
+                label: this.translate.translate('rule_builder.definition.form.operator'),
+                type: 'select',
+                options: this.data.conditionOperators
+            },
+            {
+                name: 'value',
+                label: this.translate.translate('rule_builder.definition.form.value'),
+                type: 'text',
+            }
+        ];
+    }
+    normalizeText(value) {
+        return String(value ?? '')
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .trim()
+            .toLowerCase();
+    }
+    escapeHtml(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RuleDefinirionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-rule-definirion', imports: [
+                        FormsModule,
+                        UicFormWrapperComponent,
+                        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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MODAL_DATA]
+                }] }] });
+
 class UicRuleBuilderComponent {
+    conditions = [
+        {
+            id: 1,
+            description: 'Mayores de edad',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'greater_than',
+            operatorName: 'Mayor que',
+            value: '18',
+        },
+        {
+            id: 2,
+            description: 'Menores de edad',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        },
+        {
+            id: 3,
+            description: 'Demo 3',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        },
+        {
+            id: 4,
+            description: 'Demo 4',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        },
+        {
+            id: 5,
+            description: 'Demo 5',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        },
+        {
+            id: 6,
+            description: 'Demo 6',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        },
+        {
+            id: 7,
+            description: 'Demo 7',
+            fieldName: 'Edad',
+            fieldCode: 'age',
+            operatorCode: 'less_than',
+            operatorName: 'Menor que',
+            value: '18',
+        }
+    ];
+    conditionOperators = [
+        { id: 'equal', text: 'Igual que' },
+        { id: 'not_equal', text: 'Distinto de' },
+        { id: 'greater_than', text: 'Mayor que' },
+        { id: 'less_than', text: 'Menor que' },
+    ];
+    conditionFields = [
+        { id: 'name', text: 'Nombre' },
+        { id: 'age', text: 'Edad' },
+        { id: 'country', text: 'Pais' },
+    ];
+    availableConditions = [];
+    conditionLabels = {};
+    editing = false;
+    nextTemporalConditionId = 1;
     title = '';
     initValue = '';
-    availableConditions = [
-        { id: 1, text: 'Rule definition 192001' },
-        { id: 2, text: 'Rule definition 2' },
-        { id: 3, text: 'Rule definition 3' },
-        { id: 4, text: 'Rule definition 4' },
-    ];
     ruleDefinitionChange = new EventEmitter();
     ruleDefinition = [];
     translate = inject(UicTranslateService);
+    modal = inject(UicModalService);
     get resolvedTitle() {
         return this.title || this.translate.translate('rule_builder.title');
     }
     ngOnInit() {
-        this.ruleDefinition = this.initValue.trim()
-            ? this.parseExpression(this.initValue)
-            : this.normalizeRules(this.ruleDefinition);
+        this.refreshAvailableConditions();
+        this.ruleDefinition = this.getRulesFromInitialValue();
+        this.syncNextTemporalConditionId();
     }
     addRule(rules = this.ruleDefinition) {
         this.appendExpression(rules, this.createConditionRule());
@@ -8509,17 +8780,54 @@ class UicRuleBuilderComponent {
         rules.splice(idx, 1);
         this.syncRuleDefinition();
     }
+    manageRules(rules, idx) {
+        const targetRule = rules[idx];
+        if (targetRule?.type !== 'condition') {
+            return;
+        }
+        this.modal.openFloatingModal(RuleDefinirionComponent, {
+            title: this.translate.translate('rule_builder.rules_management'),
+            data: {
+                conditions: this.conditions,
+                conditionOperators: this.conditionOperators,
+                conditionFields: this.conditionFields,
+            },
+            size: 'medium'
+        }).afterClosed().subscribe(r => {
+            if (r.status) {
+                const condition = r.data;
+                const conditionId = this.upsertCondition(condition);
+                targetRule.value = conditionId;
+                this.syncRuleDefinition();
+            }
+        });
+    }
     print() {
         this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
-        this.ruleDefinitionChange.emit(this.getOutput());
+        this.markRulesAsSaved(this.ruleDefinition);
+        const output = this.buildRuleOutput();
+        this.initValue = output.definition;
+        this.ruleDefinitionChange.emit(output);
+        this.editing = false;
     }
     reset() {
-        this.ruleDefinition = [];
-        this.ruleDefinitionChange.emit('');
+        this.ruleDefinition = this.getRulesFromInitialValue();
+        this.ruleDefinitionChange.emit(this.buildRuleOutput());
+        this.editing = false;
     }
     getOutput() {
         this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
-        return this.buildExpression(this.ruleDefinition);
+        return this.buildRuleOutput();
+    }
+    getConditionLabel(value) {
+        return this.resolveConditionLabel(value);
+    }
+    getOperatorLabel(value) {
+        const normalizedValue = value === 'OR' ? 'OR' : 'AND';
+        const translationKey = normalizedValue === 'AND'
+            ? 'rule_builder.operators.and'
+            : 'rule_builder.operators.or';
+        return this.translate.translate(translationKey);
     }
     appendExpression(rules, expression) {
         const normalizedRules = this.normalizeRules(rules);
@@ -8532,18 +8840,19 @@ class UicRuleBuilderComponent {
     }
     syncRuleDefinition() {
         this.ruleDefinition = this.normalizeRules(this.ruleDefinition);
-        this.ruleDefinitionChange.emit(this.buildExpression(this.ruleDefinition));
     }
     createConditionRule() {
         return {
             type: 'condition',
-            value: this.getNextConditionValue()
+            value: this.getNextConditionValue(),
+            unsaved: true
         };
     }
     createGroupRule() {
         return {
             type: 'group',
-            rules: [this.createConditionRule()]
+            rules: [this.createConditionRule()],
+            unsaved: true
         };
     }
     getNextConditionValue() {
@@ -8624,6 +8933,21 @@ class UicRuleBuilderComponent {
         const { rules } = this.parseTokens(tokens);
         return this.normalizeRules(rules);
     }
+    getRulesFromInitialValue() {
+        const rules = this.initValue.trim()
+            ? this.parseExpression(this.initValue)
+            : this.normalizeRules([]);
+        this.markRulesAsSaved(rules);
+        return rules;
+    }
+    markRulesAsSaved(rules) {
+        for (const rule of rules) {
+            rule.unsaved = false;
+            if (rule.type === 'group' && rule.rules) {
+                this.markRulesAsSaved(rule.rules);
+            }
+        }
+    }
     tokenizeExpression(expression) {
         const matches = expression.match(/\{\{[^}]+\}\}|\(|\)|\bAND\b|\bOR\b/gi);
         return matches ?? [];
@@ -8658,11 +8982,89 @@ class UicRuleBuilderComponent {
     }
     resolveConditionValue(rawValue) {
         const trimmedValue = rawValue.trim();
-        const matchedOption = this.availableConditions.find(option => String(option.id) === trimmedValue);
-        return matchedOption?.id ?? trimmedValue;
+        const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === trimmedValue);
+        return matchedCondition ? this.getConditionReference(matchedCondition) : trimmedValue;
+    }
+    resolveConditionLabel(value) {
+        const matchedCondition = this.conditions.find(condition => String(this.getConditionReference(condition)) === String(value));
+        return matchedCondition?.description ?? String(value ?? '');
+    }
+    upsertCondition(condition) {
+        const normalizedCondition = { ...condition };
+        if (normalizedCondition.id === 0) {
+            normalizedCondition.temporalId = normalizedCondition.temporalId ?? this.getNextTemporalConditionId();
+        }
+        const conditionReference = this.getConditionReference(normalizedCondition);
+        const existingIndex = this.conditions.findIndex(item => String(this.getConditionReference(item)) === String(conditionReference));
+        if (existingIndex >= 0) {
+            this.conditions[existingIndex] = normalizedCondition;
+        }
+        else {
+            this.conditions = [...this.conditions, normalizedCondition];
+        }
+        this.refreshAvailableConditions();
+        return conditionReference;
+    }
+    buildRuleOutput() {
+        const definition = this.buildExpression(this.ruleDefinition);
+        const usedConditionReferences = new Set(this.collectConditionValues(this.ruleDefinition));
+        const rulesToCreate = this.conditions
+            .filter(condition => condition.id === 0 && !!condition.temporalId && usedConditionReferences.has(String(this.getConditionReference(condition))))
+            .map(condition => ({
+            temporalId: condition.temporalId,
+            fieldCode: condition.fieldCode,
+            operatorCode: condition.operatorCode,
+            value: condition.value,
+            description: condition.description
+        }));
+        return {
+            definition,
+            rulesToCreate
+        };
+    }
+    refreshAvailableConditions() {
+        this.conditions = this.conditions.map(condition => {
+            if (condition.id !== 0 || condition.temporalId) {
+                return condition;
+            }
+            return {
+                ...condition,
+                temporalId: this.getNextTemporalConditionId()
+            };
+        });
+        this.availableConditions = this.conditions.map(condition => ({
+            id: this.getConditionReference(condition),
+            text: condition.description
+        }));
+        this.conditionLabels = this.conditions.reduce((labels, condition) => {
+            labels[String(this.getConditionReference(condition))] = condition.description;
+            return labels;
+        }, {});
+    }
+    getConditionReference(condition) {
+        return condition.id === 0 ? (condition.temporalId ?? '') : condition.id;
+    }
+    getNextTemporalConditionId() {
+        const temporalId = `temp_${this.nextTemporalConditionId}`;
+        this.nextTemporalConditionId += 1;
+        return temporalId;
+    }
+    syncNextTemporalConditionId() {
+        const references = [
+            ...this.conditions.map(condition => String(this.getConditionReference(condition))),
+            ...this.collectConditionValues(this.ruleDefinition)
+        ];
+        const nextId = references.reduce((maxId, reference) => {
+            const match = reference.match(/^temp_(\d+)$/);
+            if (!match) {
+                return maxId;
+            }
+            return Math.max(maxId, Number(match[1]) || 0);
+        }, 0);
+        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: { title: "title", initValue: "initValue", availableConditions: "availableConditions" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange" }, ngImport: i0, template: "<div class=\"rule-tools\">\n    <h3>\n        {{resolvedTitle}}\n    </h3>\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</div>\n<div class=\"rule-container\">\n    <ng-container\n        *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n    </ng-container>\n    @if (ruleDefinition.length==0) {\n        <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n    }\n</div>\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\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\">\n                <ui-select [options]=\"availableConditions\" [(ngModel)]=\"rule.value\"></ui-select>\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                {{rule.value}}\n            </div>\n        }\n        @if (rule.type === 'group') {\n            <div class=\"rule-groups\">\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", styles: [".rule-tools{display:flex;gap:5px;padding:5px;margin-bottom:5px;justify-content:flex-end;border-bottom:solid 1px var(--grey-200)}.rule-tools>h3{flex:1 1}.rule-container{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding: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:10px;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(--blue-100);color:var(--blue-700)}.op-and:hover{background-color:var(--blue-200)}.rule-btns{display:flex;justify-content:flex-end;gap:10px;padding:10px;border-top:solid 1px var(--grey-200)}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}\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: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "loading", "nullable", "options"] }, { 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: "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\">\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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
@@ -8673,12 +9075,16 @@ 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    <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</div>\n<div class=\"rule-container\">\n    <ng-container\n        *ngTemplateOutlet=\"rulesTemplate; context: { rules: ruleDefinition, isGroup: false }\">\n    </ng-container>\n    @if (ruleDefinition.length==0) {\n        <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\n    }\n</div>\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\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\">\n                <ui-select [options]=\"availableConditions\" [(ngModel)]=\"rule.value\"></ui-select>\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                {{rule.value}}\n            </div>\n        }\n        @if (rule.type === 'group') {\n            <div class=\"rule-groups\">\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", styles: [".rule-tools{display:flex;gap:5px;padding:5px;margin-bottom:5px;justify-content:flex-end;border-bottom:solid 1px var(--grey-200)}.rule-tools>h3{flex:1 1}.rule-container{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding: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:10px;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(--blue-100);color:var(--blue-700)}.op-and:hover{background-color:var(--blue-200)}.rule-btns{display:flex;justify-content:flex-end;gap:10px;padding:10px;border-top:solid 1px var(--grey-200)}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}\n"] }]
-        }], propDecorators: { title: [{
+                    ], 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"] }]
+        }], propDecorators: { conditions: [{
                 type: Input
-            }], initValue: [{
+            }], conditionOperators: [{
+                type: Input
+            }], conditionFields: [{
                 type: Input
-            }], availableConditions: [{
+            }], title: [{
+                type: Input
+            }], initValue: [{
                 type: Input
             }], ruleDefinitionChange: [{
                 type: Output