ui-core-abv 0.6.59 → 0.6.62

package/fesm2022/ui-core-abv.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, Host, DestroyRef, signal, computed, effect, TemplateRef, ContentChild, createComponent, Injector, EnvironmentInjector, HostBinding, input, output } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, InjectionToken, Optional, Inject, Injectable, inject, ChangeDetectorRef, Pipe, ViewContainerRef, ElementRef, ViewChild, createComponent, HostListener, ViewChildren, Host, DestroyRef, signal, computed, effect, TemplateRef, ContentChild, Injector, EnvironmentInjector, HostBinding, input, output } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, Subscription } from 'rxjs';
@@ -9,8 +9,8 @@ import { HttpClient } from '@angular/common/http';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i1$2 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
-import { filter } from 'rxjs/operators';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
+import { filter } from 'rxjs/operators';
 import * as XLSX from 'xlsx';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
@@ -2222,6 +2222,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['dropdownTemplate']
             }] } });
 
+const fadeAndRise = trigger('fadeAndRise', [
+    transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
+]);
+
+class UicTooltipComponent {
+    tooltip = '';
+    left = 0;
+    top = 0;
+    placement = 'bottom';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [class.tooltip--top]=\"placement === 'top'\"\r\n     [class.tooltip--bottom]=\"placement === 'bottom'\"\r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"], animations: [fadeAndRise] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [class.tooltip--top]=\"placement === 'top'\"\r\n     [class.tooltip--bottom]=\"placement === 'bottom'\"\r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"] }]
+        }] });
+
+class UicToolTipDirective {
+    elementRef;
+    appRef;
+    injector;
+    tip = '';
+    componentRef = null;
+    constructor(elementRef, appRef, injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    onMouseEnter() {
+        if (!this.canShowTooltipOnHover()) {
+            return;
+        }
+        if (this.componentRef === null && this.tip != '' && this.tip != null) {
+            this.componentRef = createComponent(UicTooltipComponent, {
+                environmentInjector: this.injector
+            });
+            this.appRef.attachView(this.componentRef.hostView);
+            const domElem = this.componentRef.hostView
+                .rootNodes[0];
+            document.body.appendChild(domElem);
+            this.setTooltipComponentProperties();
+        }
+    }
+    canShowTooltipOnHover() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return true;
+        }
+        const canHoverWithAnyPointer = window.matchMedia('(any-hover: hover)').matches;
+        const hasAnyFinePointer = window.matchMedia('(any-pointer: fine)').matches;
+        if (canHoverWithAnyPointer && hasAnyFinePointer) {
+            return true;
+        }
+        // Fallback for browsers with limited support for "any-*" media queries.
+        return window.matchMedia('(hover: hover)').matches
+            && window.matchMedia('(pointer: fine)').matches;
+    }
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tip;
+            this.componentRef.changeDetectorRef.detectChanges();
+            requestAnimationFrame(() => {
+                if (!this.componentRef) {
+                    return;
+                }
+                const tooltipElement = this.componentRef.hostView
+                    .rootNodes[0];
+                const targetRect = this.elementRef.nativeElement.getBoundingClientRect();
+                const tooltipRect = tooltipElement.getBoundingClientRect();
+                const spacing = 8;
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                const availableAbove = targetRect.top;
+                const availableBelow = viewportHeight - targetRect.bottom;
+                let placement = 'bottom';
+                let top = targetRect.bottom + spacing;
+                if (availableBelow < tooltipRect.height + spacing && availableAbove > availableBelow) {
+                    placement = 'top';
+                    top = Math.max(spacing, targetRect.top - tooltipRect.height - spacing);
+                }
+                else {
+                    top = Math.min(top, viewportHeight - tooltipRect.height - spacing);
+                }
+                const centerX = targetRect.left + (targetRect.width / 2);
+                const maxLeft = viewportWidth - (tooltipRect.width / 2) - spacing;
+                const minLeft = (tooltipRect.width / 2) + spacing;
+                const left = Math.min(Math.max(centerX, minLeft), maxLeft);
+                this.componentRef.instance.left = left;
+                this.componentRef.instance.top = top;
+                this.componentRef.instance.placement = placement;
+                this.componentRef.changeDetectorRef.detectChanges();
+            });
+        }
+    }
+    onMouseLeave() {
+        this.destroy();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UicToolTipDirective, isStandalone: true, selector: "[uiTooltip]", inputs: { tip: ["uiTooltip", "tip"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiTooltip]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tip: [{
+                type: Input,
+                args: ['uiTooltip']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 const base$7 = createValueAccessor();
 class UicSearcherComponent extends base$7 {
     icon = ''; // Icono externo
@@ -2365,17 +2491,17 @@ class UicSearcherComponent extends base$7 {
                 useExisting: forwardRef(() => UicSearcherComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button  [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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" }] });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { 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" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe], providers: [
+            args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, UicButtonComponent, InputWrapperComponent, UicTranslatePipe, UicToolTipDirective], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UicSearcherComponent),
                             multi: true
                         }
-                    ], template: "<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@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button  [attr.tip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
+                    ], template: "<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@if ( !stateless ||   (!disabled && stateless)) {\r\n  <div class=\"fakeinput-wrapp\" >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" #fakeinput \r\n          [ngClass]=\"{'errorinput':error, 'disabledinput':disabled, 'loading-input':watingApi||loading}\" style=\"cursor: pointer;\">\r\n          @if (selectedOption == null) {           \r\n            @if (internalIcon) {\r\n                <i [class]=\"'input-internalicon f-'+ internalIcon\" ></i>\r\n            }\r\n            <div class=\"input-container\" >\r\n                <input\r\n                  [disabled]=\"disabled\"\r\n                  (focus)=\"openList()\"\r\n                  type=\"text\"\r\n                  (keydown.enter)=\"triggerSearch()\"\r\n                  (keydown.escape)=\"clearSearch()\"\r\n                  [(ngModel)]=\"searchText\"\r\n                  (ngModelChange)=\"onSearchChange($event)\"\r\n                  [placeholder]=\"placeholder | uicTranslate\"\r\n                />\r\n            </div>     \r\n            @if (!disabled) {\r\n              @if (manualSearch) {\r\n                <ui-button [uiTooltip]=\"'searcher.clear_tip' | uicTranslate\" (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\n              }\r\n              <ui-button [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-eraser-line\" (click)=\"clearSearch()\"></ui-button>\r\n            }\r\n          }@else {\r\n            <div class=\"input-container\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn?itemDisplayFn(selectedOption):''\"></div> \r\n                <ui-button [iconOnly]=\"true\" (click)=\"unselect()\" type=\"ghost\" size=\"t\" icon=\"ri-close-large-line\" color=\"red\"></ui-button>\r\n              </div>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </ui-input-wrapper>\r\n  \r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"input-options\">\r\n    <div class=\"input-option-scroll\">\r\n      @for (item of items; track $index) {\r\n        <div class=\"input-option\" [class.item-disabled]=\"itemIsEnabledFn?!itemIsEnabledFn(item):false\"\r\n         (click)=\"selectItem(item)\" \r\n         [innerHTML]=\"itemDisplayFn?itemDisplayFn(item):''\">\r\n        </div>\r\n      }@empty {\r\n        <div class=\"t-disabled\">{{'searcher.empty' | uicTranslate}}</div>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".selected-item{border-radius:5px;background-color:var(--primary-100);padding-left:10px;height:25px;display:flex;gap:20px;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}\n", ":host{width:100%}.input-container{flex:1 1;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden;display:flex;flex-direction:column}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{display:flex;align-items:center;padding:6px 12px;line-height:1rem;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--secondary-100)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon{color:var(--grey-700);margin-right:calc(var(--form-ref) * .6);font-size:calc(2.5 * var(--form-ref))}.label{font-size:max(var(--form-ref) + 4px,14px);line-height:1.125rem;min-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{min-height:calc(4 * var(--form-ref));border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;padding:0 var(--form-ref)}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;overflow:hidden;font-size:max(var(--form-ref) + 4px,14px);white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep textarea{padding:10px 0}.fakeinput ::ng-deep input{height:calc(4 * var(--form-ref));padding:0}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{font-size:max(var(--form-ref) + 4px,14px);flex-grow:1;outline:none;width:100%;background-color:transparent;border:none!important}.fakeinput ::ng-deep input:disabled,.fakeinput ::ng-deep textarea:disabled{color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput ::ng-deep input:disabled::placeholder,.fakeinput ::ng-deep textarea:disabled::placeholder{color:var(--disabled-color-placeholder)}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:var(--grey-200)}.fakeinput-button:disabled{background-color:var(--disabled-background);color:var(--disabled-color)}.fakeinput-button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput-button:enabled:active{background-color:var(--primary-700)}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:var(--grey-200)}.fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)!important}.t-disabled{color:var(--disabled-color);padding:5px;text-align:center}.disabledinput{background-color:var(--disabled-background);color:var(--disabled-color)}.disabledinput ::ng-deep input{color:var(--disabled-color)}.inputlabel{display:flex;align-items:center}.f-primary{color:var(--primary-500)}.f-secondary{color:var(--secondary-500)}.f-red{color:var(--red-500)}.f-yellow{color:var(--yellow-500)}.f-blue{color:var(--blue-500)}.f-green{color:var(--green-500)}.f-grey{color:var(--grey-400)}.f-black{color:var(--grey-900)}.tip{color:var(--grey-500)}.item-disabled{color:var(--grey-400)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}.select-searcher{width:100%;display:flex;gap:5px;padding:.25rem;border-bottom:1px solid var(--grey-200);background-color:var(--white)}.select-searcher>input{flex:1 1;padding:3px 5px;border:solid 1px var(--grey-200);margin:0 auto;border-radius:4px}.select-searcher>input:focus{outline:none;box-shadow:0 0 0 3px var(--secondary-alpha);border-color:var(--primary-500)}.option-text-highlight ::ng-deep mark{background-color:var(--secondary-200);color:inherit;padding:0;border-radius:2px}@keyframes shimmer{to{background-position-x:0%}}.char-counter{width:100%;display:flex;justify-content:flex-end;font-size:10px;color:var(--grey-400)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -3700,6 +3826,7 @@ class UicDynamicFormComponent {
     ngZone;
     fieldsSignal = signal([]);
     formSignal = signal(null);
+    disabledSignal = signal(false);
     formState = inject(UicFormStateService);
     http = inject(HttpClient);
     alertS = inject(UicPushAlertService);
@@ -3723,7 +3850,12 @@ class UicDynamicFormComponent {
     get form() {
         return this.formSignal();
     }
-    disabled = false;
+    set disabled(value) {
+        this.disabledSignal.set(!!value);
+    }
+    get disabled() {
+        return this.disabledSignal();
+    }
     voiceToTextSilenceMs = 2000;
     cols = 2;
     fileUidResolverFn;
@@ -3796,6 +3928,7 @@ class UicDynamicFormComponent {
         const currentForm = this.formSignal();
         if (!currentForm)
             return;
+        const formDisabled = this.disabledSignal();
         const fieldStates = this.fieldStates();
         const visibleNames = new Set(this.visibleFieldStates().map(({ field }) => field.name));
         const allFieldNames = new Set(fieldStates.map(({ field }) => field.name));
@@ -3809,7 +3942,7 @@ class UicDynamicFormComponent {
                 control.markAsPristine();
                 control.markAsUntouched();
             }
-            const shouldEnable = isVisible && !field.disabled;
+            const shouldEnable = isVisible && !formDisabled && !field.disabled;
             if (shouldEnable && control.disabled) {
                 control.enable({ emitEvent: false });
             }
@@ -4210,7 +4343,7 @@ class UicFormWrapperComponent {
             const initial = this.normalizeFieldValue(field, this.newFieldInitialValue(field, true));
             const controlState = {
                 value: initial,
-                disabled: !!field.disabled
+                disabled: this.disabled || !!field.disabled
             };
             newForm.addControl(field.name, this.fb.control(controlState, validators));
         });
@@ -4317,6 +4450,7 @@ class UicFormWrapperComponent {
                 control.setValidators(this.mapValidatorsFromField(updatedField));
                 control.updateValueAndValidity({ onlySelf: true, emitEvent: false });
             }
+            this.updateDisabledState();
             return;
         }
     }
@@ -4324,7 +4458,7 @@ class UicFormWrapperComponent {
         const control = this.getFieldControl(name);
         if (!control)
             return;
-        if (disabled) {
+        if (disabled || this.disabled) {
             control.disable({ emitEvent: false });
         }
         else {
@@ -4357,7 +4491,7 @@ class UicFormWrapperComponent {
         const validators = this.mapValidatorsFromField(field);
         const controlState = {
             value: this.normalizeFieldValue(field, this.newFieldInitialValue(field)),
-            disabled: !!field.disabled
+            disabled: this.disabled || !!field.disabled
         };
         this.form.addControl(field.name, this.fb.control(controlState, validators), { emitEvent: false });
         this.updateExtenalData();
@@ -4947,131 +5081,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['click']
             }] } });
 
-const fadeAndRise = trigger('fadeAndRise', [
-    transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
-    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
-]);
-
-class UicTooltipComponent {
-    tooltip = '';
-    left = 0;
-    top = 0;
-    placement = 'bottom';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [class.tooltip--top]=\"placement === 'top'\"\r\n     [class.tooltip--bottom]=\"placement === 'bottom'\"\r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"], animations: [fadeAndRise] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [class.tooltip--top]=\"placement === 'top'\"\r\n     [class.tooltip--bottom]=\"placement === 'bottom'\"\r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"] }]
-        }] });
-
-class UicToolTipDirective {
-    elementRef;
-    appRef;
-    injector;
-    tip = '';
-    componentRef = null;
-    constructor(elementRef, appRef, injector) {
-        this.elementRef = elementRef;
-        this.appRef = appRef;
-        this.injector = injector;
-    }
-    onMouseEnter() {
-        if (!this.canShowTooltipOnHover()) {
-            return;
-        }
-        if (this.componentRef === null && this.tip != '' && this.tip != null) {
-            this.componentRef = createComponent(UicTooltipComponent, {
-                environmentInjector: this.injector
-            });
-            this.appRef.attachView(this.componentRef.hostView);
-            const domElem = this.componentRef.hostView
-                .rootNodes[0];
-            document.body.appendChild(domElem);
-            this.setTooltipComponentProperties();
-        }
-    }
-    canShowTooltipOnHover() {
-        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
-            return true;
-        }
-        const canHoverWithAnyPointer = window.matchMedia('(any-hover: hover)').matches;
-        const hasAnyFinePointer = window.matchMedia('(any-pointer: fine)').matches;
-        if (canHoverWithAnyPointer && hasAnyFinePointer) {
-            return true;
-        }
-        // Fallback for browsers with limited support for "any-*" media queries.
-        return window.matchMedia('(hover: hover)').matches
-            && window.matchMedia('(pointer: fine)').matches;
-    }
-    setTooltipComponentProperties() {
-        if (this.componentRef !== null) {
-            this.componentRef.instance.tooltip = this.tip;
-            this.componentRef.changeDetectorRef.detectChanges();
-            requestAnimationFrame(() => {
-                if (!this.componentRef) {
-                    return;
-                }
-                const tooltipElement = this.componentRef.hostView
-                    .rootNodes[0];
-                const targetRect = this.elementRef.nativeElement.getBoundingClientRect();
-                const tooltipRect = tooltipElement.getBoundingClientRect();
-                const spacing = 8;
-                const viewportWidth = window.innerWidth;
-                const viewportHeight = window.innerHeight;
-                const availableAbove = targetRect.top;
-                const availableBelow = viewportHeight - targetRect.bottom;
-                let placement = 'bottom';
-                let top = targetRect.bottom + spacing;
-                if (availableBelow < tooltipRect.height + spacing && availableAbove > availableBelow) {
-                    placement = 'top';
-                    top = Math.max(spacing, targetRect.top - tooltipRect.height - spacing);
-                }
-                else {
-                    top = Math.min(top, viewportHeight - tooltipRect.height - spacing);
-                }
-                const centerX = targetRect.left + (targetRect.width / 2);
-                const maxLeft = viewportWidth - (tooltipRect.width / 2) - spacing;
-                const minLeft = (tooltipRect.width / 2) + spacing;
-                const left = Math.min(Math.max(centerX, minLeft), maxLeft);
-                this.componentRef.instance.left = left;
-                this.componentRef.instance.top = top;
-                this.componentRef.instance.placement = placement;
-                this.componentRef.changeDetectorRef.detectChanges();
-            });
-        }
-    }
-    onMouseLeave() {
-        this.destroy();
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    destroy() {
-        if (this.componentRef !== null) {
-            this.appRef.detachView(this.componentRef.hostView);
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UicToolTipDirective, isStandalone: true, selector: "[tip]", inputs: { tip: "tip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tip]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tip: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
 class UicTableUicSearcherComponent {
     placeholder = 'table.search_placeholder';
     label = 'table.search_label';
@@ -5842,7 +5851,7 @@ class ItemValueComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (currentData) {\r\n    @if (type == 'text' || !type) {\r\n        <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n            @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n            {{  currentData.value }} \r\n            @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n        </div>\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  currentData.value }} \r\n            <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{  (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ currentData.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ currentData.value  }} \r\n            @if( currentData.value && currentData.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of currentData.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"currentData.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (currentData.value) {\r\n            <ui-status-label  [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( currentData.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  currentData.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (currentData) {\r\n    @if (type == 'text' || !type) {\r\n        <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n            @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n            {{  currentData.value }} \r\n            @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n        </div>\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  currentData.value }} \r\n            <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{  (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ currentData.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ currentData.value  }} \r\n            @if( currentData.value && currentData.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of currentData.list; track $index) {\r\n            <i [uiTooltip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"currentData.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (currentData.value) {\r\n            <ui-status-label  [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( currentData.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  currentData.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
             type: Component,
@@ -5856,7 +5865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicButtonComponent,
                         CurrencyPipe,
                         DatePipe
-                    ], template: "@if (currentData) {\r\n    @if (type == 'text' || !type) {\r\n        <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n            @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n            {{  currentData.value }} \r\n            @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n        </div>\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  currentData.value }} \r\n            <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{  (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ currentData.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ currentData.value  }} \r\n            @if( currentData.value && currentData.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of currentData.list; track $index) {\r\n            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"currentData.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (currentData.value) {\r\n            <ui-status-label  [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( currentData.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  currentData.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
+                    ], template: "@if (currentData) {\r\n    @if (type == 'text' || !type) {\r\n        <div [class]=\"'ui-trc-' + currentData.textColor \">\r\n            @if( currentData.icon ){ <i [class]=\"currentData.icon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n            {{  currentData.value }} \r\n            @if( currentData.rightIcon ){ <i [class]=\"currentData.rightIcon + ' ui-trc-' + currentData.iconColor\"></i>}\r\n        </div>\r\n    }\r\n    @if (type == 'copy') {\r\n        <div class=\"copy-div\">\r\n            {{  currentData.value }} \r\n            <ui-button (click)=\"copyText((currentData.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n        </div>\r\n    }\r\n    @if (type == 'money'){\r\n        {{  (currentData.value??0) | currency: currentData.currencyCode||''}} \r\n    }\r\n    @if (type == 'bold'){\r\n        <b>{{ currentData.value}}</b>\r\n    }\r\n    @if (type == 'date'){\r\n        {{ (currentData.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n    }\r\n    @if (type == 'bigtext') {\r\n        <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n            {{ currentData.value  }} \r\n            @if( currentData.value && currentData.value.toString().length > 0){\r\n                <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n            }\r\n            @if (!expanded && currentData.value && currentData.value.toString().length > 0) {\r\n                <div class=\"fade-overlay\"></div>\r\n            }\r\n        </div>\r\n    }\r\n    @if (type == 'icon-list') {\r\n        @for (alert of currentData.list; track $index) {\r\n            <i [uiTooltip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\n        }\r\n    }\r\n    @else if (type == 'list'){\r\n        <uic-table-list [list]=\"currentData.list??[]\"></uic-table-list>                 \r\n    }\r\n    @else if (type == 'user'){\r\n        <uic-table-user [user]=\"currentData.user\"></uic-table-user>                 \r\n    }\r\n    @else if (type == 'status'){\r\n        @if (currentData.value) {\r\n            <ui-status-label  [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n        }@else {\r\n            -\r\n        }\r\n    }\r\n    @else if (type == 'tag'){\r\n        <ui-status-label  type=\"tag\" [icon]=\"currentData.icon??'ri-circle-fill'\" [color]=\"currentData.color??''\"> {{currentData.value}} </ui-status-label>                \r\n    }\r\n    @else if (type == 'switch'){\r\n        <div (click)=\"$event.stopPropagation()\">\r\n            <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch>    \r\n        </div>\r\n    }\r\n\r\n    @if( currentData.subtext  ){\r\n        <div [class]=\"'subtext ui-alignment-'+alignment\">{{  currentData.subtext }}</div>\r\n    }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}.ui-alignment-right{justify-content:flex-end;text-align:right}b{font-weight:600}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}\n"] }]
         }], propDecorators: { key: [{
                 type: Input
             }], type: [{
@@ -6250,7 +6259,7 @@ class UicTableComponent {
         return `${a ?? ''}` === `${b ?? ''}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\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: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { 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"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", editable: "editable", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", headerSubtitle: "headerSubtitle", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", switchValidation: "switchValidation", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", mobilePortletCols: "mobilePortletCols", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow", cellChange: "cellChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [uiTooltip]=\"btn.tooltip??''\"\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\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: ItemValueComponent, selector: "ui-item-value", inputs: ["key", "type", "alignment", "row", "disabled", "data", "switchValidation"], outputs: ["switchConfirmed"] }, { kind: "component", type: UicShortTableComponent, selector: "ui-short-table", inputs: ["columns", "data", "loading", "disabled", "cols"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "nonSelectedText", "noneText", "emptyText", "searcherEnabled", "loading", "nullable", "options"] }, { 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"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
@@ -6266,7 +6275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicCheckboxComponent,
                         UicInputComponent,
                         UicSelectComponent,
-                        FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"] }]
+                        FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" >\r\n            </uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> \r\n            <div>\r\n                {{headerText}} <span class=\"hightlited-note\"> ({{totalItems}}) </span> \r\n            </div>\r\n            <p> {{headerSubtitle}} </p>\r\n        </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [uiTooltip]=\"btn.tooltip??''\"\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                        @else if (header.type == 'checkbox'){\r\n                                            <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (isCellEditable(header)) {\r\n                                            @if ((header.editionType ?? 'input') === 'select') {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-select\r\n                                                        [disabled]=\"disabled\"\r\n                                                        [options]=\"header.editionTypeOptions || []\"\r\n                                                        [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                        (ngModelChange)=\"onEditableSelectChange(row.id, row.data, header.key, $event)\">\r\n                                                    </ui-select>\r\n                                                </div>\r\n                                            } @else {\r\n                                                <div class=\"ui-editable-cell\" (click)=\"$event.stopPropagation()\">\r\n                                                    <ui-input [disabled]=\"disabled\">\r\n                                                        <input\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [ngModel]=\"getEditableCellValue(row.id, header.key)\"\r\n                                                            (ngModelChange)=\"onEditableInputChange(row.id, header.key, $event)\"\r\n                                                            (blur)=\"onEditableInputBlur(row.id, row.data, header.key)\" />\r\n                                                    </ui-input>\r\n                                                </div>\r\n                                            }\r\n                                        }\r\n                                        @else {\r\n                                            <ui-item-value\r\n                                                [disabled]=\"disabled\"\r\n                                                [key]=\"header.key\"\r\n                                                [type]=\"header.type??'text'\"\r\n                                                [row]=\"row\"\r\n                                                [alignment]=\"alignment\"\r\n                                                [switchValidation]=\"switchValidation\"\r\n                                                (switchConfirmed)=\"switchHandler(row.id, $event, header.label)\"\r\n                                            ></ui-item-value>\r\n                                        }\r\n                                    </div>\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                        <ui-short-table [columns]=\"columns\" [cols]=\"mobilePortletCols\" [data]=\"row\"></ui-short-table>\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage | uicTranslate}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--table-hover)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:calc(var(--table-spacing-ref) * 1.6) 20px;font-weight:600;font-size:18px;line-height:20px;gap:16px;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-table-topbar p{font-size:14px;font-weight:400;color:var(--grey-400)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content;text-align:left}.ui-editable-cell{width:100%;min-width:150px}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;align-items:normal;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.header-white{color:var(--table-header-color);background-color:#fff}.header-white:hover{background-color:var(--table-hover)!important}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -6599,11 +6608,11 @@ class UicTabsButtonComponent {
         this.activeTabChange.emit(this.activeTab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            <div class=\"tab-text\">\r\n                {{tab.text}}\r\n                @if(tab.warning){\r\n                    <span [tip]=\"tab.warning\" class=\"warning-tab\">!</span>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.warning-tab{right:-17px;top:-5px;width:12px;height:12px;border-radius:50%;background-color:var(--red-600);position:absolute;color:#fff;font-size:12px;display:flex;justify-content:center;align-items:center}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;align-items:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.tab-text{position:relative}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            <div class=\"tab-text\">\r\n                {{tab.text}}\r\n                @if(tab.warning){\r\n                    <span [uiTooltip]=\"tab.warning\" class=\"warning-tab\">!</span>\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.warning-tab{right:-17px;top:-5px;width:12px;height:12px;border-radius:50%;background-color:var(--red-600);position:absolute;color:#fff;font-size:12px;display:flex;justify-content:center;align-items:center}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;align-items:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.tab-text{position:relative}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tabs-button', imports: [UicToolTipDirective], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            <div class=\"tab-text\">\r\n                {{tab.text}}\r\n                @if(tab.warning){\r\n                    <span [tip]=\"tab.warning\" class=\"warning-tab\">!</span>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.warning-tab{right:-17px;top:-5px;width:12px;height:12px;border-radius:50%;background-color:var(--red-600);position:absolute;color:#fff;font-size:12px;display:flex;justify-content:center;align-items:center}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;align-items:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.tab-text{position:relative}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"] }]
+            args: [{ selector: 'ui-tabs-button', imports: [UicToolTipDirective], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            <div class=\"tab-text\">\r\n                {{tab.text}}\r\n                @if(tab.warning){\r\n                    <span [uiTooltip]=\"tab.warning\" class=\"warning-tab\">!</span>\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;overflow:hidden;border-radius:10px}.warning-tab{right:-17px;top:-5px;width:12px;height:12px;border-radius:50%;background-color:var(--red-600);position:absolute;color:#fff;font-size:12px;display:flex;justify-content:center;align-items:center}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;align-items:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.tab-text{position:relative}.active-tab{background-color:#fff;box-shadow:0 0 8px 1px #0000000d}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeTab: [{
@@ -6796,11 +6805,11 @@ class UicWorkPanelComponent {
         return !(this.isMinimized || !this.activeTabId) && this.fullView;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n  [class.dynamic-width]=\"!fullView\"\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    @if (activeTabTitle) {\r\n      <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n    }\r\n    @if (moreActions.length > 0) {  \r\n      <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n    }\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { moreActions: "moreActions", componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { actionSelected: "actionSelected", tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n  [class.dynamic-width]=\"!fullView\"\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    @if (activeTabTitle) {\r\n      <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n    }\r\n    @if (moreActions.length > 0) {  \r\n      <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n    }\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [uiTooltip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [uiTooltip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [uiTooltip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\n    }\r\n    <ui-button (click)=\"closeActiveTab()\" size=\"s\" [uiTooltip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n  [class.dynamic-width]=\"!fullView\"\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    @if (activeTabTitle) {\r\n      <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n    }\r\n    @if (moreActions.length > 0) {  \r\n      <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n    }\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [tip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [tip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [tip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"closeActiveTab()\" size=\"s\" [tip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
+            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective, UicTranslatePipe, UicActionButtonComponent], template: "<div\r\n  [class.dynamic-width]=\"!fullView\"\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    @if (activeTabTitle) {\r\n      <div class=\"wp-title\">{{activeTabTitle}}</div>\r\n    }\r\n    @if (moreActions.length > 0) {  \r\n      <ui-action-button [options]=\"moreActions\" (optionSelected)=\"emitAction($event)\"></ui-action-button>\r\n    }\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" [uiTooltip]=\"'work_panel.minimize' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" [uiTooltip]=\"'work_panel.reduce' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" [uiTooltip]=\"'work_panel.expand' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\n    }\r\n    <ui-button (click)=\"closeActiveTab()\" size=\"s\" [uiTooltip]=\"'work_panel.close' | uicTranslate\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.wp-title{flex:1 1;font-weight:600}.mid-panel{position:fixed;height:80vh;min-width:30%;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;align-items:center;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}.dynamic-width{width:var(--panel-width)}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
                 type: ViewChild,
                 args: ['host', { read: ViewContainerRef, static: true }]
@@ -7767,7 +7776,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\">\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 [uiTooltip]=\"'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 [uiTooltip]=\"'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: "[uiTooltip]", inputs: ["uiTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicEditableTableComponent, decorators: [{
             type: Component,
@@ -7778,7 +7787,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\">\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 [uiTooltip]=\"'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 [uiTooltip]=\"'editable_table.delete_column' | uicTranslate\" (click)=\"deleteColum(header)\" icon=\"ri-delete-bin-line\" color=\"red\"  size=\"s\" [iconOnly]=\"true\"></ui-button>\n                                    }\n                                    @if (resolvedConfig().resizeableColumns) {\n                                        <span\n                                            class=\"column-resize-handle\"\n                                            (pointerdown)=\"startColumnResize($event, $index)\"\n                                        ></span>\n                                    }\n\n                                </div>\n                            }\n                        </th>\n                    }\n                </tr>\n            </thead>\n            <tbody>\n                @for (row of visibleRows(); track $index; let i = $index) {\n                    <tr>\n                        @if (rowActions().length > 0) {\n                            <td class=\"action-col\">\n                                <div class=\"action-cell\">\n                                    <ui-action-button [options]=\"rowActions()\" (optionSelected)=\"handleRowAction($event.id, i)\"></ui-action-button>\n                                </div>\n                            </td>\n                        }\n                        @for (header of headers; track $index; let col = $index) {\n                            <td>\n                                <input\n                                    [disabled]=\"columnDisabledByHeader()[header]\"\n                                    [type]=\"columnInputTypeByHeader()[header]\"\n                                    [attr.data-row]=\"i\"\n                                    [attr.data-col]=\"col\"\n                                    [(ngModel)]=\"row[header]\"\n                                    (blur)=\"onCellBlur()\"\n                                    (keydown)=\"onCellKeydown($event, i, col)\">\n                            </td>\n                        }\n                    </tr>\n                }\n            </tbody>\n        </table>\n        @if (hasMoreRows()) {\n            <div class=\"show-more\">\n                <ui-button color=\"black\" type=\"bordered\" size=\"m\" (click)=\"showMoreRows()\">\n                    {{'excel_table.see_more' | uicTranslate}}\n                </ui-button>\n            </div>\n        }\n        <div class=\"table-counter\">\n            {{'excel_table.counter_text' | uicTranslate:{shown: visibleRows().length, total: rows.length} }}\n        </div>\n    } @else{\n        <div class=\"empty-msg\"> {{'excel_table.empty_message' | uicTranslate}} </div>\n    }\n</div>\n", styles: [".xls-table{width:max-content;min-width:0;table-layout:fixed;border:solid 1px var(--grey-200);border-radius:5px;overflow:hidden}.xls-table th,.xls-table td{height:28px;padding:2px;line-height:14px;font-size:12px;border-bottom:solid 1px var(--grey-200)}.xls-table td{background-color:var(--grey-100)}.xls-table td input{padding:3px;border:solid 1px white;border-radius:3px;background-color:#fff;font-weight:300;width:calc(100% - 8px)}.xls-table td input:enabled:hover{border-color:var(--primary-400)}.xls-table td input:disabled{border-color:var(--grey-100);background-color:var(--grey-50);color:var(--grey-700)}.xls-table td input:focus{border-color:var(--primary-600)}.xls-table th{line-height:28px;white-space:nowrap;background-color:var(--grey-400);color:#fff;text-align:left;padding:0;border:solid 1px white}.action-col{width:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;box-sizing:border-box;overflow:hidden}.action-cell{display:flex;align-items:center;justify-content:center;width:30px;min-width:30px;max-width:30px;box-sizing:border-box;flex:0 0 auto}.xlstable-overflow{overflow-x:auto;overflow-y:hidden;width:100%}.show-more{display:flex;justify-content:center;margin-top:10px}.table-counter{margin-top:8px;text-align:right;font-size:11px;color:var(--grey-500);font-weight:400}.hea-th{display:flex;position:relative;justify-content:space-between;width:100%;gap:5px;align-items:center;padding:0 10px}.hea-th i{cursor:pointer}.column-resize-handle{position:absolute;top:0;right:0;background-color:var(--grey-500);width:6px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none;transition:opacity ease .3s}.column-resize-handle:hover{opacity:.5}.hea-th-edit{gap:4px}.new-col-name{width:140px;height:24px;border:solid 1px var(--grey-300);border-radius:3px;padding:0 6px;font-size:12px}.empty-msg{text-align:center;color:var(--grey-500);padding:20px;font-weight:300;font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { visibleRowsStep: [{
                 type: Input
             }], record: [{
@@ -8688,11 +8697,11 @@ class FieldTypeSelectorComponent {
         this.selectType.emit(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldTypeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FieldTypeSelectorComponent, isStandalone: true, selector: "lib-field-type-selector", outputs: { selectType: "selectType" }, ngImport: i0, template: "@for (type of types; track $index) {\r\n    <div [tip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\r\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"], dependencies: [{ 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: FieldTypeSelectorComponent, isStandalone: true, selector: "lib-field-type-selector", outputs: { selectType: "selectType" }, ngImport: i0, template: "@for (type of types; track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FieldTypeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-field-type-selector', imports: [UicToolTipDirective, UicTranslatePipe], template: "@for (type of types; track $index) {\r\n    <div [tip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\r\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"] }]
+            args: [{ selector: 'lib-field-type-selector', imports: [UicToolTipDirective, UicTranslatePipe], template: "@for (type of types; track $index) {\r\n    <div [uiTooltip]=\"type.label | uicTranslate\" (click)=\"addField(type)\" class=\"field-type\">\n        <i [class]=\"type.icon\"></i>\r\n        <!-- <div>\r\n            <b>{{type.label}}</b>\r\n            <p>{{type.detail}}</p>\r\n        </div> -->\r\n    </div>\r\n}\n", styles: [":host{display:flex;overflow:auto;gap:5px}.field-type{border:solid 1px var(--grey-300);border-radius:5px;padding:5px;display:flex;align-items:center;background-color:#fff;cursor:pointer;gap:5px}.field-type b{font-weight:400}.field-type p{font-size:12px;color:var(--grey-400)}\n"] }]
         }] });
 
 class BlockEditorComponent {
@@ -8735,7 +8744,7 @@ class BlockEditorComponent {
         this.blockChange.emit({ ...this.block(), fields: nextFields });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button [tip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: FieldTypeSelectorComponent, selector: "lib-field-type-selector", outputs: ["selectType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: BlockEditorComponent, isStandalone: true, selector: "lib-block-editor", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, selectedFieldId: { classPropertyName: "selectedFieldId", publicName: "selectedFieldId", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { blockChange: "blockChange", addFieldRequest: "addFieldRequest", deleteBlock: "deleteBlock", notifySelectedField: "notifySelectedField" }, ngImport: i0, template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: FieldTypeSelectorComponent, selector: "lib-field-type-selector", outputs: ["selectType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlockEditorComponent, decorators: [{
             type: Component,
@@ -8746,7 +8755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         DragDropModule,
                         FormsModule,
                         FieldTypeSelectorComponent
-                    ], template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button [tip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}\n"] }]
+                    ], template: "<div class=\"form-block-card\">\n    <div class=\"form-block-card-header\">\n        <div>\n            <input [placeholder]=\"'form_builder.block_title' | uicTranslate\" [ngModel]=\"block().title\" (ngModelChange)=\"changeTitle($event)\">\n            <input [placeholder]=\"'form_builder.block_subtitle' | uicTranslate\" [ngModel]=\"block().subtitle\" (ngModelChange)=\"changeSubtitle($event)\">\n        </div>\n        <ui-button [uiTooltip]=\"'form_builder.delete_block' | uicTranslate\" (click)=\"deleteBlock.emit(block().code)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n    </div>\n    <div\n        class=\"form-block-card-body\"\n        cdkDropList\n        [cdkDropListData]=\"block().fields\"\n        (cdkDropListDropped)=\"reorderFields($event)\">\n        \n        <!-- FIELDS -->\n        @for(edtField of block().fields; track edtField.code; let i = $index) {\n            <div\n                class=\"xfield-card\"\n                cdkDrag\n                [class.selected-field]=\"selectedFieldId === edtField.code\"\n                (click)=\"selectField(edtField)\">\n                <i class=\"ri-draggable field-drag-handle\" cdkDragHandle></i>\n\n                <div class=\"xfield-card-icon\">\n                    <i [class]=\"edtField.field?.icon ?? ''\"></i> \n                </div>\n                <div class=\"xfield-card-body\">\n                    <b> {{edtField.fieldData.label}} \n                        @if(edtField.fieldData.visibilityRules) {\n                            <i class=\"branched-field ri-git-merge-line\"></i> \n                            <span> {{edtField.fieldData.visibilityRules[0]?.fieldName??'-'}} </span>\n                        }\n                    </b>\n                    <p> {{edtField.field?.label ?? edtField.type ?? edtField.fieldData.type}} </p>\n                </div>\n                <div class=\"xfield-card-actions\">\n                    <ui-button (click)=\"deleteField(edtField.code, $event)\" size=\"s\" icon=\"ri-delete-bin-line\" color=\"red\" type=\"ghost\" [iconOnly]=\"true\"></ui-button>\n                </div>\n            </div>\n\n        }\n\n    </div>\n    <div class=\"new-field\">\n        {{'form_builder.add_new_field' | uicTranslate}}\n        <lib-field-type-selector (selectType)=\"addField($event)\"></lib-field-type-selector>\n    </div>\n</div>\n", styles: [".form-block-card{border:solid 1px var(--blue-500);border-radius:5px;overflow:hidden}.form-block-card-header{display:flex;gap:5px;align-items:center;background-color:#fff;padding:10px;border-bottom:solid 1px var(--grey-300)}.form-block-card-header>div{flex:1 1;gap:4px;display:flex;flex-direction:column}.form-block-card-header>div input{border:solid 1px var(--grey-100);padding:3px 6px;border-radius:5px}.form-block-card-header>div input:focus{border:solid 1px var(--primary-500);outline:none}.form-block-card-body{padding:15px;display:flex;flex-direction:column;background-color:var(--grey-50);gap:10px}.xfield-card{background-color:#fff;border-radius:5px;padding:10px;gap:10px;display:flex;align-items:center;border:solid 2px var(--grey-200);cursor:pointer;transition:border-color .3s ease}.xfield-card:hover{border-color:var(--grey-300)}.xfield-card-icon{display:flex;justify-content:center;align-items:center;border-radius:5px;width:30px;height:30px;font-size:20px;background-color:var(--grey-300);color:var(--grey-600)}.xfield-card-body{flex:1 1}.xfield-card-body b{display:flex;align-items:center;gap:5px}.xfield-card-body p{color:var(--grey-400);font-size:12px}.field-drag-handle{cursor:grab;color:var(--grey-400);transition:color .2s ease}.field-drag-handle:active{cursor:grabbing}.xfield-card:hover .field-drag-handle{color:var(--grey-600)}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 6px 12px #0000002e}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.form-block-card-body.cdk-drop-list-dragging .xfield-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.branched-field{color:var(--yellow-600)}.selected-field,.selected-field:hover{border-color:var(--primary-500)}.new-field{border-top:solid 1px var(--grey-300);padding:10px;background-color:#fff;display:flex;flex-direction:column;gap:5px;font-size:14px}\n"] }]
         }], propDecorators: { selectedFieldId: [{
                 type: Input
             }] } });
@@ -9714,7 +9723,7 @@ class UicRuleBuilderComponent {
         this.nextTemporalConditionId = nextId + 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { disabled: "disabled", conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        @if (!disabled) {\r\n            <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n        }\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\r\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicRuleBuilderComponent, isStandalone: true, selector: "ui-rule-builder", inputs: { disabled: "disabled", conditions: "conditions", conditionOperators: "conditionOperators", conditionFields: "conditionFields", ruleTitle: "ruleTitle", ruleDefinition: "ruleDefinition" }, outputs: { ruleDefinitionChange: "ruleDefinitionChange", conditionsChange: "conditionsChange" }, ngImport: i0, template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [uiTooltip]=\"'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 [uiTooltip]=\"'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 [uiTooltip]=\"'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>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [uiTooltip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n            <ui-button color=\"black\" [uiTooltip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [uiTooltip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [uiTooltip]=\"'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>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [uiTooltip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [uiTooltip]=\"'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 [uiTooltip]=\"'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 [uiTooltip]=\"'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>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [uiTooltip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: UicToolTipDirective, selector: "[uiTooltip]", inputs: ["uiTooltip"] }, { kind: "pipe", type: UicTranslatePipe, name: "uicTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicRuleBuilderComponent, decorators: [{
             type: Component,
@@ -9724,7 +9733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         UicToolTipDirective,
                         UicTranslatePipe
-                    ], template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n        <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup()\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n    }@else {\r\n        @if (!disabled) {\r\n            <ui-button [tip]=\"'rule_builder.edit_tip' | uicTranslate\" (click)=\"editing=true\" size=\"s\" type=\"bordered\" icon=\"ri-edit-line\">{{'rule_builder.edit' | uicTranslate}}</ui-button>\r\n        }\r\n    }\r\n</div>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [tip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\r\n            <ui-button color=\"black\" [tip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\r\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [tip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\r\n                    <div\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [tip]=\"'rule_builder.delete_rule_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n            </div>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [tip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\r\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [tip]=\"'rule_builder.add_rule_tip' | uicTranslate\" (click)=\"addRule(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_rule' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.add_group_tip' | uicTranslate\" (click)=\"addGroup(rule.rules ?? [])\" size=\"s\" type=\"bordered\" icon=\"ri-add-line\">{{'rule_builder.add_group' | uicTranslate}}</ui-button>\r\n                    <ui-button [tip]=\"'rule_builder.delete_group_tip' | uicTranslate\" (click)=\"removeRule(rules, i)\" [iconOnly]=\"true\" size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" color=\"red\"></ui-button>\r\n                </div>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [tip]=\"getConditionDetailTip(rule.value)\">\r\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+                    ], template: "\r\n<div class=\"rule-tools\">\r\n    <h3>\r\n        {{resolvedTitle}}\r\n    </h3>\r\n    @if (editing) {\r\n        <ui-button [uiTooltip]=\"'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 [uiTooltip]=\"'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 [uiTooltip]=\"'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>\r\n<div class=\"rule-container\" [class.focused-box]=\"editing\">\r\n    <div class=\"rule-container-workspace\">\r\n        @if (editing) {\r\n            <ng-container\r\n                *ngTemplateOutlet=\"rulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        } @else {\r\n            <ng-container *ngTemplateOutlet=\"readOnlyTemplate\"></ng-container>\r\n        }\r\n        @if (editorRules.length==0) {\r\n            <div class=\"empty-rule-msg\">{{'rule_builder.no_rules' | uicTranslate}}</div>\r\n        }\r\n    </div>\r\n    @if (editing) {\r\n        <div class=\"rule-btns\">\r\n            <ui-button color=\"black\" type=\"bordered\" [uiTooltip]=\"'rule_builder.reset_tip' | uicTranslate\" (click)=\"reset()\" >{{'rule_builder.reset' | uicTranslate}}</ui-button>\n            <ui-button color=\"black\" [uiTooltip]=\"'rule_builder.save_tip' | uicTranslate\" (click)=\"print()\">{{'rule_builder.save' | uicTranslate}}</ui-button>\n        </div>\r\n    }\r\n</div>\r\n\r\n<ng-template #rulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    @for (rule of rules; track $index; let i = $index) {\r\n        @if (rule.type === 'condition') {\r\n            <div class=\"rule-condition\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div [uiTooltip]=\"'rule_builder.edit_condition_tip' | uicTranslate\" (click)=\"manageRules(rules, i)\">\n                    <div\r\n                        class=\"condition-box\"\r\n                        [class.condition-box-empty]=\"rule.value == null || rule.value === ''\"\r\n                        [class.condition-box-loading]=\"isConditionLabelPending(rule.value)\">\r\n                        @if (rule.value == null || rule.value === '') {\r\n                            {{ 'rule_builder.select_condition' | uicTranslate }}\r\n                        } @else if (isConditionLabelPending(rule.value)) {\r\n                            <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                        } @else {\r\n                            {{ getConditionLabel(rule.value) }}\r\n                        }\r\n                    </div>\r\n                </div>\r\n                <ui-button [uiTooltip]=\"'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>\r\n        }\r\n        @if (rule.type === 'operator') {\r\n            <div [uiTooltip]=\"'rule_builder.toggle_operator_tip' | uicTranslate\"\n                (click)=\"changeOperator(rules, i)\"\r\n                class=\"rule-operator {{rule.value === 'AND' ? 'op-and' : 'op-or'}}\">\r\n                {{ getOperatorLabel(rule.value) }}\r\n            </div>\r\n        }\r\n        @if (rule.type === 'group') {\r\n            <div class=\"rule-groups\" [class.rule-unsaved]=\"rule.unsaved\">\r\n                <div class=\"rule-groups-tools\">\r\n                    <ui-button [uiTooltip]=\"'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 [uiTooltip]=\"'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 [uiTooltip]=\"'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>\r\n                <div class=\"rule-groups-items\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"rulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        }\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyTemplate>\r\n    @if (editorRules.length > 0) {\r\n        <div class=\"rule-friendly-output\">\r\n            <ng-container\r\n                *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: editorRules, isGroup: false }\">\r\n            </ng-container>\r\n        </div>\r\n    }\r\n</ng-template>\r\n\r\n<ng-template #readOnlyRulesTemplate let-rules=\"rules\" let-isGroup=\"isGroup\">\r\n    <div class=\"readonly\">\r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">(</div>\r\n        }\r\n    \r\n        @for (rule of rules; track $index) {\r\n            @if (rule.type === 'condition') {\r\n                <div class=\"readonly-condition\" [class.readonly-condition-loading]=\"isConditionLabelPending(rule.value)\" [uiTooltip]=\"getConditionDetailTip(rule.value)\">\n                    @if (isConditionLabelPending(rule.value)) {\r\n                        <span class=\"condition-box-loader\" aria-hidden=\"true\"></span>\r\n                    } @else {\r\n                        {{ getConditionLabel(rule.value) }}\r\n                    }\r\n                </div>\r\n            }\r\n    \r\n            @if (rule.type === 'operator') {\r\n                <div class=\"readonly-operator\">{{ getOperatorLabel(rule.value) }}</div>\r\n            }\r\n    \r\n            @if (rule.type === 'group') {\r\n                <div class=\"readonly-group\">\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"readOnlyRulesTemplate; context: { rules: rule.rules ?? [], isGroup: true }\">\r\n                    </ng-container>\r\n                </div>\r\n            }\r\n        }\r\n    \r\n        @if (isGroup) {\r\n            <div class=\"readonly-group\">)</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: [".rule-tools{display:flex;gap:5px;align-items:center;padding:5px;margin-bottom:5px;justify-content:flex-end}.rule-tools>h3{flex:1 1}.rule-container{padding:5px;border-top:solid 1px var(--grey-300)}.rule-container-workspace{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px;margin-bottom:10px}.rule-groups{background-color:var(--grey-50);border:solid 1px var(--grey-300);overflow:hidden;border-radius:10px}.rule-groups-tools{display:flex;border-bottom:solid 1px var(--grey-300);background-color:var(--grey-200);gap:5px;padding:5px;justify-content:flex-end}.rule-groups-items{display:flex;padding:5px;align-items:center;gap:10px;flex-wrap:wrap}.rule-condition{padding:5px;border:solid 1px var(--grey-300);border-radius:10px;background-color:#fff;font-size:14px;display:flex;gap:5px;align-items:center}.rule-condition ui-select{min-width:100px}.rule-operator{padding:5px;border-radius:10px;font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.op-or{background-color:var(--red-100);color:var(--red-600)}.op-or:hover{background-color:var(--red-200)}.op-and{background-color:var(--green-100);color:var(--green-700)}.op-and:hover{background-color:var(--green-200)}.rule-btns{border-top:solid 1px var(--grey-300);display:flex;justify-content:flex-end;gap:10px;padding:5px;margin-top:5px}.empty-rule-msg{padding:10px;font-size:13px;text-align:center;width:100%;color:var(--grey-400)}.focused-box{border:solid 1px var(--primary-400);border-radius:10px;box-shadow:0 0 0 3px var(--secondary-alpha)}.rule-unsaved{border-color:var(--yellow-300)!important}.condition-box{font-size:14px;padding:5px 15px;color:var(--blue-700);border:solid 1px var(--blue-500);background-color:var(--blue-100);transition:background-color ease .2s;border-radius:10px;cursor:pointer}.condition-box:hover{background-color:var(--blue-200)}.condition-box-loading{min-width:120px}.condition-box-loader{display:block;width:100%;min-width:72px;height:1em;border-radius:999px;background:linear-gradient(90deg,var(--grey-200) 0%,var(--grey-100) 50%,var(--grey-200) 100%);background-size:200% 100%;animation:rule-builder-loading 1.1s linear infinite}.condition-box-empty{color:var(--red-800);border-color:var(--red-400);background:linear-gradient(135deg,var(--red-100) 0%,#ffdede 100%);box-shadow:inset 0 0 0 1px #b91c1c14}.condition-box-empty:hover{background:linear-gradient(135deg,var(--red-200) 0%,#ffcaca 100%)}.readonly{display:flex;gap:5px;align-items:center}.readonly-condition{font-size:13px;background-color:var(--blue-100);padding:4px 8px;color:var(--blue-800);border-radius:5px;font-weight:400}.readonly-condition-loading{min-width:96px}.readonly-operator{font-size:12px;font-weight:500;color:var(--grey-500)}.readonly-group{font-weight:600;color:var(--red-500)}@keyframes rule-builder-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], conditions: [{