ui-core-abv 0.1.2 → 0.1.3

package/fesm2022/ui-core-abv.mjs

@@ -1,12 +1,12 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, Pipe, createComponent, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, Pipe, createComponent, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
-import * as i1$1 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import * as i1$2 from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
@@ -97,6 +97,7 @@ class UicCheckboxComponent extends base$3 {
     type = 'check';
     placeholder = '';
     loading = false;
+    noPadding = false;
     disabled = false;
     toggle() {
         if (!this.disabled && !this.loading) {
@@ -104,13 +105,13 @@ class UicCheckboxComponent extends base$3 {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { icon: "icon", iconColor: "iconColor", label: "label", tip: "tip", type: "type", placeholder: "placeholder", loading: "loading", disabled: "disabled" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { icon: "icon", iconColor: "iconColor", label: "label", tip: "tip", type: "type", placeholder: "placeholder", loading: "loading", noPadding: "noPadding", disabled: "disabled" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UicCheckboxComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n    @if (label) {\r\n      <div class=\"label  inputlabel\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"check-form-container\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        } \r\n          {{placeholder}}\r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n    @if (label) {\r\n      <div class=\"label  inputlabel\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        {{placeholder}}\r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.placeholder-space{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
             type: Component,
@@ -120,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicCheckboxComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n    @if (label) {\r\n      <div class=\"label  inputlabel\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div class=\"check-form-container\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        } \r\n          {{placeholder}}\r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\n"] }]
+                    ], template: "<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\">\r\n    @if (label) {\r\n      <div class=\"label  inputlabel\">\r\n        {{label}} \r\n      </div>\r\n    }\r\n    <div [class.check-form-container]=\"!noPadding\">\r\n      <div (click)=\"toggle()\" class=\"check-wrapper\">\r\n        @if (type=='check') {\r\n          <button\r\n            type=\"button\"\r\n            class=\"checkbox\"\r\n            [disabled]=\"disabled\"\r\n            [class.checked]=\"value\"\r\n            [class.placeholder-space]=\"placeholder!=''\"\r\n            [disabled]=\"disabled\"\r\n            (keydown.enter)=\"toggle()\"\r\n            (keydown.space)=\"toggle()\"\r\n          >\r\n            <span class=\"icon\">\r\n              @if (value) {\r\n                  \u2714\r\n              }@else {\r\n                  \u2212\r\n              }\r\n            </span>\r\n          </button>\r\n        }@else{\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle\"\r\n            [class.checked]=\"value\"\r\n            [disabled]=\"disabled\"\r\n          >\r\n            <span class=\"thumb\"></span>\r\n          </button>\r\n        }\r\n        {{placeholder}}\r\n        <ng-content></ng-content> \r\n      </div>\r\n    </div>\r\n    @if (tip) {\r\n        <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n    }\r\n    \r\n  </div>\r\n</div>\r\n", styles: [".check-form-container{height:calc(4 * var(--form-ref));display:flex;align-items:center}.check-wrapper{padding:2px;cursor:pointer;display:flex;align-items:center;font-size:.875rem}.placeholder-space{margin-right:.5rem}.checkbox{width:calc(var(--design-size-ref) * 2.2);height:calc(var(--design-size-ref) * 2.2);display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--grey-500);border-radius:6px;background:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:var(--secondary-400)}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.checkbox:disabled{background:var(--disabled-background);border-color:var(--disabled-background);cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.checked:hover:not(:disabled){background:var(--secondary-400);border-color:var(--secondary-400)}.checkbox.checked .icon{color:var(--white)}.checkbox.indeterminate{background:var(--secondary-500);border-color:var(--secondary-500)}.checkbox.indeterminate .icon{color:var(--white)}.checkbox .icon{font-size:1rem;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}.toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:var(--grey-300)}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:var(--grey-200);cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:var(--grey-300);cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:var(--secondary-400)}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px var(--secondary-alpha)}.toggle.checked{background:var(--secondary-500)}.toggle.checked:hover:not(:disabled){background:var(--secondary-400)}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:var(--white);border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
@@ -135,6 +136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], loading: [{
                 type: Input
+            }], noPadding: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }] } });
@@ -725,7 +728,7 @@ class UicDynamicFormComponent {
         pattern: (_err, field) => `${field.label ?? field.name} no tiene el formato correcto.`
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "disabled", "label", "error", "tip", "max", "min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "disabled"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n      \r\n      @if ( ['text','number'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [icon]=\"field.icon??''\"\r\n          [disabled]=\"!!form.get(field.name)?.disabled\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\" >\r\n            <input \r\n              [id]=\"field.name\"\r\n              [formControlName]=\"field.name\"\r\n              [type]=\"field.type\"\r\n              [placeholder]=\"field.placeholder??field.label\"/>\r\n        </ui-input>\r\n\r\n      }\r\n      @else if (field.type === 'date') {\r\n        <ui-date-picker\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n        ></ui-date-picker>\r\n      }\r\n      @else if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [loading]=\"field.loading??false\"\r\n          [tip]=\"field.tip??''\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n      @else if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [tip]=\"field.tip??''\"\r\n        ></ui-checkbox>\r\n      }\r\n      @else if (field.type === 'slider') {\r\n        <ui-slider\r\n          [min]=\"field.min??0\"\r\n          [max]=\"field.max??100\"\r\n          [step]=\"field.sliderInterval??1\"\r\n          [markerCount]=\"field.sliderMarks??5\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [tip]=\"field.tip??''\"\r\n          [error]=\"getErrorMessages(field)[0]\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        ></ui-slider>\r\n      }\r\n      @else if (field.type === 'switch') {\r\n        <ui-checkbox\r\n          type=\"switch\"\r\n          [id]=\"field.name\"\r\n          [icon]=\"field.icon??''\"\r\n          [formControlName]=\"field.name\"\r\n          [tip]=\"field.tip??''\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label + (field.required ? ' *' : '')\"\r\n        >\r\n        </ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "disabled", "label", "error", "tip", "max", "min"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
             type: Component,
@@ -765,7 +768,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicFormWrapperComponent {
     fb = inject(FormBuilder);
     form = this.fb.group({});
-    useSteps = false;
     currentStep = 0;
     schema;
     externalData = {};
@@ -788,10 +790,6 @@ class UicFormWrapperComponent {
     }
     handleNgOnChange() {
         this.buildForm();
-        this.useSteps = !!this.schema?.steps?.length;
-        if (this.useSteps && this.schema?.steps) {
-            this.currentStep = Math.min(this.currentStep, this.schema.steps.length - 1);
-        }
     }
     buildForm() {
         if (this.form) {
@@ -842,16 +840,9 @@ class UicFormWrapperComponent {
     updateExtenalData() {
         if (!this.externalData)
             return;
-        if (this.useSteps) {
-            this.schema.steps?.forEach(step => {
-                step.blocks.forEach(block => { block.fields = this.updateFieldOptions(block); });
-            });
-        }
-        else {
-            this.schema.blocks?.forEach(block => {
-                block.fields = this.updateFieldOptions(block);
-            });
-        }
+        this.schema.blocks?.forEach(block => {
+            block.fields = this.updateFieldOptions(block);
+        });
     }
     mapValidatorsFromField(f) {
         const validators = [];
@@ -871,13 +862,15 @@ class UicFormWrapperComponent {
     }
     // FUNCIONES INTERNAS 
     handleSubmit() {
+        let result = { result: false, form: null };
         if (this.form.valid) {
-            this.formSubmit.emit({ result: true, form: this.form.value });
+            result = { result: true, form: this.form.value };
         }
         else {
             this.form.markAllAsTouched();
-            this.formSubmit.emit({ result: false, form: null });
         }
+        this.formSubmit.emit(result);
+        return result;
     }
     handleFormChange() {
         this.formChange.emit(this.form.getRawValue());
@@ -900,35 +893,8 @@ class UicFormWrapperComponent {
     collectAllFields() {
         if (!this.schema)
             return [];
-        if (this.useSteps && this.schema.steps) {
-            return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
-        }
         return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
     }
-    // STEP MANAGEMENT
-    getCurrentBlocks() {
-        if (!this.schema)
-            return [];
-        if (this.useSteps) {
-            const step = this.schema.steps?.[this.currentStep];
-            return step?.blocks ?? [];
-        }
-        return this.schema.blocks ?? [];
-    }
-    nextStep() {
-        const stepsCount = this.schema?.steps?.length ?? 0;
-        if (this.useSteps && this.currentStep < stepsCount - 1) {
-            this.currentStep++;
-        }
-    }
-    prevStep() {
-        if (this.useSteps && this.currentStep > 0) {
-            this.currentStep--;
-        }
-    }
-    getStepTitle() {
-        return this.schema.steps?.[this.currentStep]?.title ?? '';
-    }
     // FUNCIONES PÚBLICAS
     // ACTUALIZAR EL VALOR DE UN CAMPO
     updateFieldValue(name, value) {
@@ -948,12 +914,6 @@ class UicFormWrapperComponent {
         }
         if (this.updateSchemaField(name, { disabled }, this.schema.blocks))
             return;
-        if (this.schema.steps) {
-            for (const step of this.schema.steps) {
-                if (this.updateSchemaField(name, { disabled }, step.blocks))
-                    return;
-            }
-        }
     }
     updateFieldLoading(name, loading) {
         const control = this.form.get(name);
@@ -961,12 +921,6 @@ class UicFormWrapperComponent {
             return;
         if (this.updateSchemaField(name, { loading }, this.schema.blocks))
             return;
-        if (this.schema.steps) {
-            for (const step of this.schema.steps) {
-                if (this.updateSchemaField(name, { loading }, step.blocks))
-                    return;
-            }
-        }
     }
     updateSchemaField(name, values, blocks) {
         if (!blocks)
@@ -988,21 +942,11 @@ class UicFormWrapperComponent {
             return; // evitar duplicados
         const validators = this.mapValidatorsFromField(field);
         const controlState = { value: this.newFieldInitialValue(field), disabled: !!field.disabled };
-        this.form.addControl(field.name, this.fb.control(controlState, validators));
-        // Buscar en schema según steps o blocks
-        if (this.useSteps && this.schema.steps) {
-            for (const step of this.schema.steps) {
-                if (this.insertField(field, step.blocks, after))
-                    return;
-            }
-        }
-        else if (this.insertField(field, this.schema.blocks, after))
+        this.form.addControl(field.name, this.fb.control(controlState, validators), { emitEvent: false });
+        this.updateExtenalData();
+        if (this.insertField(field, this.schema.blocks, after))
             return;
-        // Si no se encontró `after`, lo agregamos al final del primer bloque
-        if (this.useSteps && this.schema.steps?.length) {
-            this.schema.steps[0]?.blocks?.[0]?.fields.push(field);
-        }
-        else if (this.schema.blocks?.length) {
+        if (this.schema.blocks?.length) {
             this.schema.blocks[0].fields.push(field);
         }
     }
@@ -1029,7 +973,7 @@ class UicFormWrapperComponent {
     ;
     removeFieldControl(name) {
         if (this.form.contains(name)) {
-            this.form.removeControl(name);
+            this.form.removeControl(name, { emitEvent: false });
         }
         const removeSchemaField = (blocks) => {
             if (!blocks)
@@ -1045,19 +989,13 @@ class UicFormWrapperComponent {
         };
         if (removeSchemaField(this.schema.blocks))
             return;
-        if (this.schema.steps) {
-            for (const step of this.schema.steps) {
-                if (removeSchemaField(step.blocks))
-                    return;
-            }
-        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            @if (block.title) {\r\n              <div class=\"block-title\">{{ block.title }}</div>\r\n            }\r\n            <ui-dynamic-form\r\n              [cols]=\"schema.cols\"\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [cols]=\"schema.cols\"\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"(schema.steps?.[currentStep]?.blocks?.[0]?.fields?.length) ?? 0\"\r\n        ></ui-skeleton-loader>\r\n      } \r\n      @else {\r\n        @for (block of getCurrentBlocks(); track block.title) {\r\n          <section class=\"form-block\">\r\n            @if (block.title) {\r\n              <div class=\"block-title\">{{ block.title }}</div>\r\n            }\r\n            <ui-dynamic-form\r\n              [cols]=\"schema.cols\"\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </ui-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n        @if ((schema.steps?.length ?? 0) > 0 && currentStep < ((schema.steps?.length ?? 1) - 1)) {\r\n          <button type=\"button\" (click)=\"nextStep()\">Siguiente</button>\r\n        } @else {\r\n          <button type=\"submit\">Guardar</button>\r\n        }\r\n      </div>\r\n    } \r\n  } \r\n  @else {\r\n    @for (block of getCurrentBlocks(); track block.title) {\r\n      <section class=\"form-block\">\r\n        @if (block.title){\r\n            <div class=\"block-title\">{{ block.title }}</div>\r\n        }\r\n        @if (loading) {\r\n          <ui-skeleton-loader\r\n            [cols]=\"schema.cols\"\r\n            [inputs]=\"block.fields.length\"\r\n          ></ui-skeleton-loader>\r\n        } @else {\r\n          <ui-dynamic-form\r\n            [cols]=\"schema.cols\"\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </ui-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"] }]
+            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}\n"] }]
         }], propDecorators: { schema: [{
                 type: Input
             }], externalData: [{
@@ -1074,6 +1012,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+class StepTabsComponent {
+    tabs = [];
+    currentTab = '';
+    navigationEnabled = true;
+    showStepTitle = true;
+    currentTabChange = new EventEmitter();
+    currentIndex = 1;
+    changeTab(newTab) {
+        if (this.navigationEnabled) {
+            this.currentIndex = (this.tabs.findIndex(f => f == newTab) ?? 0) + 1;
+            this.currentTab = newTab;
+            this.currentTabChange.emit(newTab);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: StepTabsComponent, isStandalone: true, selector: "ui-step-tabs", inputs: { tabs: "tabs", currentTab: "currentTab", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle" }, outputs: { currentTabChange: "currentTabChange" }, ngImport: i0, template: "<div class=\"tabs-wrapper\">\r\n    @for (tab of tabs; track tab) {\r\n        <div class=\"form-tab\" \r\n            [class.selected-tab]=\"tab == currentTab\" \r\n            [class.tab-hover]=\"navigationEnabled && tab != currentTab\"\r\n            (click)=\"changeTab(tab)\">\r\n            <div class=\"form-tab-title\">{{tab}}</div>\r\n            <div class=\"form-tab-bar\"></div>\r\n        </div>\r\n    }\r\n</div>\r\n@if (showStepTitle) {\r\n    <h1 class=\"tab-title\"> {{currentIndex + \". \" + currentTab}} </h1>\r\n}", styles: [".tabs-wrapper{display:flex;gap:16px;margin-bottom:32px;align-items:flex-end}.form-tab{color:var(--white);transition:ease .3s;width:70px;overflow:hidden;-webkit-user-select:none;user-select:none;font-weight:600;font-size:14px;white-space:nowrap}.form-tab-title{padding:8px 33px 8px 0}.form-tab-bar{width:100%;height:6px;border-radius:20px;background-color:var(--grey-300)}.selected-tab{color:var(--grey-900);width:fit-content}.selected-tab .form-tab-bar{background-color:var(--grey-800)}.tab-hover:hover{width:fit-content;cursor:pointer;color:var(--grey-400)}.tab-title{font-size:32px;font-weight:600;line-height:38px}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StepTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-step-tabs', imports: [], template: "<div class=\"tabs-wrapper\">\r\n    @for (tab of tabs; track tab) {\r\n        <div class=\"form-tab\" \r\n            [class.selected-tab]=\"tab == currentTab\" \r\n            [class.tab-hover]=\"navigationEnabled && tab != currentTab\"\r\n            (click)=\"changeTab(tab)\">\r\n            <div class=\"form-tab-title\">{{tab}}</div>\r\n            <div class=\"form-tab-bar\"></div>\r\n        </div>\r\n    }\r\n</div>\r\n@if (showStepTitle) {\r\n    <h1 class=\"tab-title\"> {{currentIndex + \". \" + currentTab}} </h1>\r\n}", styles: [".tabs-wrapper{display:flex;gap:16px;margin-bottom:32px;align-items:flex-end}.form-tab{color:var(--white);transition:ease .3s;width:70px;overflow:hidden;-webkit-user-select:none;user-select:none;font-weight:600;font-size:14px;white-space:nowrap}.form-tab-title{padding:8px 33px 8px 0}.form-tab-bar{width:100%;height:6px;border-radius:20px;background-color:var(--grey-300)}.selected-tab{color:var(--grey-900);width:fit-content}.selected-tab .form-tab-bar{background-color:var(--grey-800)}.tab-hover:hover{width:fit-content;cursor:pointer;color:var(--grey-400)}.tab-title{font-size:32px;font-weight:600;line-height:38px}\n"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], currentTab: [{
+                type: Input
+            }], navigationEnabled: [{
+                type: Input
+            }], showStepTitle: [{
+                type: Input
+            }], currentTabChange: [{
+                type: Output
+            }] } });
+
+class UicStepsFormComponent {
+    allForms;
+    steps = [];
+    navigationEnabled = false;
+    showStepTitle = true;
+    showButtons = true;
+    buttonsColor = 'black';
+    formSubmit = new EventEmitter();
+    externalData = {};
+    formDisabled = false;
+    loading = false;
+    tabs = [];
+    completedForms = new Map();
+    currentTabTitle = '';
+    ngOnInit() {
+        this.tabs = this.steps.map(p => p.title);
+        this.currentTabTitle = this.tabs[0];
+    }
+    getFormByTitle(title) {
+        return this.allForms.find((form, index) => this.steps[index].title === title);
+    }
+    // CONTROLES DE FORMULARIO
+    updateFieldValue(step, controlName, value) {
+        const stepForm = this.getFormByTitle(step);
+        stepForm?.updateFieldValue(controlName, value);
+    }
+    updateFildDisabled(step, controlName, value) {
+        const stepForm = this.getFormByTitle(step);
+        stepForm?.updateFieldDisabled(controlName, value);
+    }
+    updateFildLoading(step, controlName, value) {
+        const stepForm = this.getFormByTitle(step);
+        stepForm?.updateFieldLoading(controlName, value);
+    }
+    // CONTROLES DE MOVIMIENTO
+    next() {
+        if (!this.isLast) {
+            if (this.handleStepSubmit(this.currentTabTitle)) {
+                this.currentTabTitle = this.steps[this.currentIdx + 1]?.title ?? '';
+            }
+        }
+        else if (this.handleStepSubmit(this.currentTabTitle)) {
+            this.formSubmit.emit({
+                result: true,
+                form: this.getMergedForm()
+            });
+        }
+    }
+    back() {
+        if (!this.isFirst) {
+            this.currentTabTitle = this.steps[this.currentIdx - 1]?.title ?? '';
+        }
+    }
+    handleStepSubmit(title) {
+        const stepForm = this.getFormByTitle(this.currentTabTitle);
+        const result = stepForm?.handleSubmit();
+        if (!result?.result) {
+            return false;
+        }
+        else {
+            this.completedForms.set(title, result.form);
+            return true;
+        }
+    }
+    getMergedForm() {
+        return Object.assign({}, ...Array.from(this.completedForms.values()));
+    }
+    get currentIdx() {
+        return this.steps.findIndex(f => f.title === this.currentTabTitle);
+    }
+    get isFirst() {
+        return this.currentIdx === 0;
+    }
+    get isLast() {
+        return this.currentIdx === this.steps.length - 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: StepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "initialValues"], outputs: ["formSubmit", "formChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-steps-form', imports: [StepTabsComponent, UicButtonComponent, UicFormWrapperComponent], template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"] }]
+        }], propDecorators: { allForms: [{
+                type: ViewChildren,
+                args: [UicFormWrapperComponent]
+            }], steps: [{
+                type: Input
+            }], navigationEnabled: [{
+                type: Input
+            }], showStepTitle: [{
+                type: Input
+            }], showButtons: [{
+                type: Input
+            }], buttonsColor: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
 class UicSearcherComponent {
     renderer;
     overlay;
@@ -1201,13 +1270,13 @@ class UicSearcherComponent {
         this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
         this.overlayRef.overlayElement.style.width = `${width}px`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$1.Overlay }, { token: i1$1.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\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\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (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      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\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(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\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: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, deps: [{ token: i0.Renderer2 }, { token: i1$2.Overlay }, { token: i1$2.OverlayPositionBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSearcherComponent, isStandalone: true, selector: "ui-searcher", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", showSelected: "showSelected", placeholder: "placeholder", searchFn: "searchFn", itemDisplayFn: "itemDisplayFn", itemIsEnabledFn: "itemIsEnabledFn", manualSearch: "manualSearch", selectedItem: "selectedItem" }, outputs: { selectedItemChange: "selectedItemChange" }, viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: true }, { propertyName: "dropdownTemplateRef", first: true, predicate: ["dropdownTemplate"], descendants: true }], ngImport: i0, template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\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\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (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      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\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(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-searcher', imports: [CommonModule, FormsModule, AsyncPipe, UicButtonComponent], template: "\r\n<div class=\"input-wrapper\">\r\n  @if (icon) {\r\n    <i class=\"input-externalicon f-{{iconColor}} {{icon}}\"></i>\r\n  }\r\n  <div class=\"input-elements\" [style]=\"icon?'max-width: calc(100% - 34px);':''\"> \r\n      <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n          {{label}} \r\n      </div>\r\n      \r\n      <div class=\"fakeinput-wrapp\" #inputwrapp >\r\n        <!-- INPUT -->\r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\r\n          @if (selectedItem == null) {           \r\n            @if (internalIcon) {\r\n                <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n            }\r\n            <div class=\"input-container pad-{{size}}\" >\r\n                <input\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\"\r\n                />\r\n            </div>     \r\n            @if (manualSearch) {\r\n              <ui-button  (click)=\"triggerSearch()\" size=\"t\" ></ui-button>\r\n            }\r\n            <ui-button size=\"t\" icon=\"ri-close-large-line\" (click)=\"clearSearch()\"></ui-button>\r\n          }@else {\r\n            <div class=\"input-container pad-{{size}}\" >\r\n              <div class=\"selected-item\" >\r\n                <div class=\"selected-item-text\" [innerHTML]=\"itemDisplayFn(selectedItem)\"></div> \r\n                <ui-button (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      @if (tip) {\r\n          <div class=\"fakeinput-alert tip\">{{tip}}</div>\r\n      }\r\n      @if (error) {\r\n          <div class=\"fakeinput-alert f-red\">{{error}}</div>\r\n      }\r\n      \r\n  </div>\r\n</div>\r\n\r\n<ng-template #dropdownTemplate>\r\n  @if (results$ | async; as items){\r\n  <div class=\"results\">\r\n    @if (isLoading) {\r\n      <div class=\"loader\"></div>\r\n    }\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(item)\" (click)=\"selectItem(item)\" [innerHTML]=\"itemDisplayFn(item)\">\r\n          </div>\r\n        }@empty {\r\n          <div class=\"t-disabled\">No hay elementos para mostrar</div>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: [".loader{height:4px;width:100%;--c:no-repeat linear-gradient(#6100ee 0 0);background:var(--c),var(--c),#d7b8fc;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}}.wrapp-fakeinput{position:relative}.selected-item{border-radius:5px;background-color:var(--primary-500);padding-left:10px;height:25px;display:flex;align-items:center;justify-content:space-between}.selected-item-text{overflow:hidden;white-space:nowrap}.results{background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px var(--grey-200);border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;font-size:.875rem;z-index:500;overflow:hidden}.option-divider{width:98%;margin:auto;border-bottom:1px solid var(--grey-200)}.input-option{line-height:1rem;display:flex;align-items:center;padding:6px 12px;-webkit-user-select:none;user-select:none;transition:ease .3s;border-radius:.25rem}.input-option-focused{background-color:var(--primary-500)}.input-option:hover{background-color:var(--secondary-100);cursor:pointer}.input-option-scroll{padding:.25rem;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px var(--grey-200);width:100%;margin-top:2px}.input-option-scroll-focused{background-color:var(--primary-300)}.input-option-scroll-btns{border-top:solid 1px var(--grey-200);padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:var(--white);border:solid 1px var(--grey-200);padding:4px 10px;border-radius:10px}.input-option-scroll app-checkbox{width:100%}.input-wrapper{display:flex;align-items:center;width:100%;max-width:100%}.input-externalicon{margin-right:.5rem;font-size:1.625rem;height:1.625rem;width:1.625rem}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:var(--grey-200);font-size:1rem}.input-internalicon-m{color:var(--grey-200);font-size:1.125rem}.input-internalicon-l{color:var(--grey-200);font-size:1.25rem}.label{font-size:.875rem;line-height:1.125rem;font-weight:400;color:var(--grey-950);margin-bottom:var(--input-label-space)}.disabled-placeholder{color:var(--disabled-color-placeholder)}.fakeinput{border-radius:var(--input-radius);overflow:hidden;border:solid 1px var(--grey-200);display:flex;align-items:center;font-size:.875rem;padding-left:.25rem;-webkit-user-select:none;user-select:none;background-color:var(--white);transition:ease .3s;height:calc(4 * var(--form-ref))}.fakeinput-wrapp{position:relative}.fakeinput-emptytext{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-emptytext i{font-size:20px}.fakeinput ::ng-deep input,.fakeinput ::ng-deep textarea{padding:5px;font-size:14px;flex-grow:1;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:focus-within button{background-color:var(--primary-500);color:var(--white)}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:var(--primary-300);color:var(--white)}.fakeinput:focus-within button:enabled:active{background-color:var(--primary-600)}.fakeinput:hover{border-color:var(--grey-400);cursor:text}.activeselect{border-color:var(--primary-600)}.errorinput{border-color:var(--red-500)}.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)}.tip{color:var(--grey-500)}.item-disabled{color:var(--disabled-color)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}.loading-input{background:linear-gradient(-45deg,#f2f2f2 40%,#dee1e2,#f2f2f2 60%);background-size:300%;background-position-x:100%;animation:shimmer 1s infinite linear}@keyframes shimmer{to{background-position-x:0%}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{
                 type: Input
@@ -1263,7 +1332,7 @@ class UicTableUicSearcherComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"searcher\">\r\n    <div class=\"fakeinput\">\r\n        <i class=\"ri-search-line\"></i>\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">Buscar</ui-button>\r\n    <ui-button (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-circle-line\" size=\"m\">Limpiar</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
@@ -1492,6 +1561,120 @@ const animatedRow = trigger('animatedRow', [
     ]),
 ]);
 
+class UicStatusLabelComponent {
+    color = 'grey';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color" }, ngImport: i0, template: "<div [class]=\"'status-label slc-' +color \" >\r\n    <i class=\"ri-circle-fill\"></i>\r\n    <div class=\"grey-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);background-color:var(--red-50)}.slc-blue{color:var(--blue-500);background-color:var(--blue-50)}.slc-green{color:var(--green-500);background-color:var(--green-50)}.slc-yellow{color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{color:var(--grey-300);background-color:var(--grey-50)}.grey-text{color:var(--grey-600)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label slc-' +color \" >\r\n    <i class=\"ri-circle-fill\"></i>\r\n    <div class=\"grey-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);background-color:var(--red-50)}.slc-blue{color:var(--blue-500);background-color:var(--blue-50)}.slc-green{color:var(--green-500);background-color:var(--green-50)}.slc-yellow{color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{color:var(--grey-300);background-color:var(--grey-50)}.grey-text{color:var(--grey-600)}\n"] }]
+        }], propDecorators: { color: [{
+                type: Input
+            }] } });
+
+class UicActionButtonComponent {
+    icon = 'ri-more-2-line';
+    options = [];
+    multiselect = false;
+    size = 's';
+    optionSelected = new EventEmitter();
+    optionsApplied = new EventEmitter();
+    menuTemplate;
+    overlayRef;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    host = inject((ElementRef));
+    selectedSet = new Set();
+    allSelected = false;
+    overlayPositions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+    ];
+    openMenu() {
+        if (this.overlayRef) {
+            this.closeMenu();
+            return;
+        }
+        const origin = this.host.nativeElement.querySelector('.action-btn');
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(origin)
+            .withPositions(this.overlayPositions)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        });
+        const portal = new TemplatePortal(this.menuTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
+    }
+    /** SINGLE SELECT MODE */
+    selectOption(option) {
+        if (!this.multiselect) {
+            this.optionSelected.emit(option);
+            this.closeMenu();
+        }
+    }
+    /** MULTISELECT MODE */
+    toggleOption(opt) {
+        if (this.selectedSet.has(opt.id)) {
+            this.selectedSet.delete(opt.id);
+        }
+        else {
+            this.selectedSet.add(opt.id);
+        }
+        this.updateAllSelected();
+    }
+    toggleAll(checked) {
+        this.allSelected = checked;
+        this.selectedSet.clear();
+        if (checked) {
+            this.options.forEach(o => this.selectedSet.add(o.id));
+        }
+    }
+    applySelection() {
+        const selected = this.options.filter(o => this.selectedSet.has(o.id));
+        this.optionsApplied.emit(selected);
+        this.closeMenu();
+    }
+    updateAllSelected() {
+        this.allSelected = this.options.length > 0 && this.selectedSet.size === this.options.length;
+    }
+    closeMenu() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { icon: "icon", options: "options", multiselect: "multiselect", size: "size" }, outputs: { optionSelected: "optionSelected", optionsApplied: "optionsApplied" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" placeholder=\"Todos\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"applySelection()\">Cerrar</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">Aplicar</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"], dependencies: [{ kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-action-button', imports: [UicCheckboxComponent, UicButtonComponent, FormsModule], template: "<!-- Bot\u00F3n -->\r\n<ui-button class=\"action-btn\" [size]=\"size\" [icon]=\"icon\" color=\"black\" [iconOnly]=\"true\" type=\"ghost\" (click)=\"openMenu()\">\r\n</ui-button>\r\n\r\n<!-- Men\u00FA -->\r\n<ng-template #menuTemplate>\r\n  <div class=\"action-menu\">\r\n    @if (multiselect) {\r\n        <div  class=\"action-menu-header\">\r\n            <ui-checkbox [noPadding]=\"true\" \r\n                [ngModel]=\"allSelected\" \r\n                (ngModelChange)=\"toggleAll($event)\" placeholder=\"Todos\"></ui-checkbox>\r\n        </div>\r\n    }\r\n    <div class=\"action-menu-body\">\r\n        @for (opt  of options; track $index) {\r\n            <div class=\"action-menu-item\" (click)=\"multiselect ? toggleOption(opt) : selectOption(opt)\">\r\n                @if (multiselect) {\r\n                    <div>\r\n                        <ui-checkbox [noPadding]=\"true\" [ngModel]=\"selectedSet.has(opt.id)\"></ui-checkbox>\r\n                    </div>\r\n                }\r\n                @if (icon) {\r\n                    <i [class]=\"opt.icon\"></i>\r\n                }\r\n                <span>{{ opt.label }}</span>\r\n            </div>\r\n        }\r\n    </div>\r\n\r\n    <!-- Footer con bot\u00F3n aplicar -->\r\n     @if (multiselect) {\r\n         <div class=\"action-menu-footer\">\r\n           <ui-button type=\"bordered\" color=\"black\" size=\"t\" (click)=\"applySelection()\">Cerrar</ui-button>\r\n           <ui-button color=\"black\" size=\"t\" (click)=\"applySelection()\">Aplicar</ui-button>\r\n         </div>\r\n     }\r\n  </div>\r\n</ng-template>\r\n", styles: [".action-menu{display:flex;flex-direction:column;max-height:300px;min-width:150px;background:#fff;border:1px solid var(--border-color, #ddd);border-radius:10px;box-shadow:0 2px 6px #00000026}.action-menu-item{padding:2px 8px;cursor:pointer;display:flex;font-size:13px;line-height:24px;font-weight:400;color:var(--grey-700);align-items:center;gap:10px}.action-menu-header{padding:2px 4px;cursor:pointer;display:flex;align-items:center;font-size:14px;gap:10px;border-bottom:solid 1px var(--grey-300)}.action-menu-item:hover{background:var(--grey-100)}.action-menu-body{overflow-y:auto}.action-menu-footer{border-top:solid 1px var(--grey-300);display:flex;justify-content:space-around;padding:4px;gap:8px}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], optionSelected: [{
+                type: Output
+            }], optionsApplied: [{
+                type: Output
+            }], menuTemplate: [{
+                type: ViewChild,
+                args: ['menuTemplate']
+            }] } });
+
 class UicTableComponent {
     columns = [];
     data = [];
@@ -1522,6 +1705,9 @@ class UicTableComponent {
         const col = data.find(col => col.key == key);
         return col?.value ?? '-';
     }
+    getMoreActions(actions) {
+        return actions.map(p => ({ id: p.key, label: p.text ?? '', icon: p.icon ?? '' }));
+    }
     getFontColor(data, key) {
         const col = data.find(col => col.key == key);
         return 'trc-' + (col?.textColor ?? 'black');
@@ -1621,12 +1807,14 @@ class UicTableComponent {
         this.checkedChange.emit([]);
     }
     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", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'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                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\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 class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"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\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\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                                                    [iconOnly]=\"btn.text==null\"\r\n                                                    [text]=\"btn.text??''\"\r\n                                                    [icon]=\"btn.icon??''\"\r\n                                                    [color]=\"btn.color\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </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            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.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}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.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}}\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: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["filter"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th [style.width.px]=\"header.width || null\" >\r\n                            <div class=\"th-wrap\">\r\n                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'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 class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"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\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key).toString()\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'status'){\r\n                                    <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\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                                                    [iconOnly]=\"btn.text==null\"\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\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                        <ui-action-button (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(header.moreActions??[])\"></ui-action-button>\r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </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            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.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}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.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}}\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: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { 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"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-table', imports: [CommonModule, UicButtonComponent, UicTableUserComponent, UicTableListComponent, UicTableUicSearcherComponent,
-                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">{{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'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                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\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 class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"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\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\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                                                    [iconOnly]=\"btn.text==null\"\r\n                                                    [text]=\"btn.text??''\"\r\n                                                    [icon]=\"btn.icon??''\"\r\n                                                    [color]=\"btn.color\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </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            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.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}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.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}}\n"] }]
+            args: [{ selector: 'ui-table', imports: [CommonModule, UicButtonComponent,
+                        UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
+                        UicTableUicSearcherComponent, UicStatusLabelComponent,
+                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th [style.width.px]=\"header.width || null\" >\r\n                            <div class=\"th-wrap\">\r\n                                @if (header.type=='checkbox') {\r\n                                    <ui-checkbox [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div (click)=\"sortClick(header.key)\" [ngClass]=\"{'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 class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"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\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                @if (header.type == 'text') {\r\n                                    {{  getValue(row.data,header.key) }} \r\n                                }\r\n                                @if (header.type == 'icon-list') {\r\n                                    <div class=\"table-icon-wrap\">\r\n                                        @for (alert of getList(row.data,header.key); track $index) {\r\n                                            <i [tip]=\"alert.text\" [class]=\"alert.icon + ' alert'\" ></i>\r\n                                        }\r\n                                    </div>\r\n                                }\r\n                                @else if (header.type == 'list'){\r\n                                    <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user>                 \r\n                                }\r\n                                @else if (header.type == 'checkbox'){\r\n                                    <ui-checkbox [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key).toString()\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                }\r\n                                @else if (header.type == 'status'){\r\n                                    <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                }\r\n                                @else if (header.type == 'actions') {                        \r\n                                    <div class=\"table-actions\">\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                                                    [iconOnly]=\"btn.text==null\"\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\"\r\n                                                    (click)=\"doAction(row.id,btn.key)\">\r\n                                                </ui-button> \r\n                                            }\r\n                                        } \r\n                                        <ui-action-button (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(header.moreActions??[])\"></ui-action-button>\r\n                                    </div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }@empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"empty\">{{emptyMessage}} </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            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.table-actions{display:flex;gap:2px}.table-icon-wrap{display:flex;justify-content:center;gap:8px;font-size:18px;margin-right:5px}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.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}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.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}}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -1898,7 +2086,7 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 399px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 399px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 399px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 399px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 399px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  class=\"backdrop\" (click)=\"closeOuside()\">   \r\n    <div @pushTop class=\"modal\" \r\n        [class]=\"myConfig.size\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        \r\n        @if ( myConfig.title) {\r\n            <div class=\"modal-header\">\r\n                {{myConfig.title}}\r\n                <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n            </div>\r\n        }\r\n        <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n            <ng-template cdkPortalOutlet></ng-template>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 399px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 399px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 399px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 399px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 399px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
@@ -1964,6 +2152,14 @@ class UicSideModalComponent {
     close() {
         this.state = 'hidden';
     }
+    cancel() {
+        if (this.myConfig.preventCloseOnCancel) {
+            this.modal.triggerSave(false);
+        }
+        else {
+            this.close();
+        }
+    }
     onAnimationDone(event) {
         if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
             this.overlayRef.dispose();
@@ -1973,11 +2169,11 @@ class UicSideModalComponent {
         this.modal.triggerSave();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"close()\" color=\"black\" size=\"l\" type=\"bordered\" icon=\"ri-close-line\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" rightIcon=\"ri-check-line\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
+            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.body-padding]=\"myConfig.title!=''\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 399px){.sidemodal{width:100%!important}}@media (min-width: 400px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:96px;padding:24px 40px;width:100%;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -2026,8 +2222,8 @@ class UicModalService {
     }
     _save$ = new Subject();
     save$ = this._save$.asObservable();
-    triggerSave() {
-        this._save$.next();
+    triggerSave(result = true) {
+        this._save$.next(result);
     }
     createOverlayConfig(isFloating) {
         const positionStrategy = isFloating
@@ -2117,5 +2313,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map