ui-core-abv 0.0.2 → 0.0.4

package/fesm2022/ui-core-abv.mjs

@@ -1,15 +1,55 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Directive, forwardRef, Component, Injectable, Pipe, createComponent, HostListener, inject, Renderer2, ViewChild, Injector, Inject, EnvironmentInjector } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
-import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
-import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, Renderer2, ViewChild, Pipe, createComponent, HostListener, Injector, Inject, EnvironmentInjector, Injectable } from '@angular/core';
+import * as i1$2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormBuilder, Validators } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule, Overlay, OverlayRef } from '@angular/cdk/overlay';
-import * as i2 from '@angular/cdk/portal';
+import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
+import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
+import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize } from 'rxjs';
+
+class UicButtonComponent {
+    text = '';
+    icon = '';
+    rightIcon = '';
+    iconOnly = false;
+    disabled = false;
+    loading = false;
+    size = 'm';
+    type = 'filled';
+    color = 'primary';
+    buttonTypeClass = "";
+    ngOnInit() {
+        this.buttonTypeClass = 'btn-' + this.type + ' btn-' + this.color + "-" + this.type;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:var(--button-radius);padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--secondary-400),.4)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:.625rem;line-height:22px}.btn-tiny i{font-size:.875rem;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:.75rem;line-height:30px}.btn-small i{font-size:1rem;line-height:30px;width:30px}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:.875rem;line-height:38px}.btn-medium i{font-size:1.625rem;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:1rem;line-height:46px}.btn-large i{font-size:1.625rem;line-height:46px;width:46px}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:1.125rem;line-height:54px}.btn-gigant i{font-size:1.625rem;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:1.125rem;width:1.125rem}.btn-filled{color:var(--white);transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-bordered{border:solid 1px var(--grey-200);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:var(--grey-300);border-color:var(--grey-300)}.btn-ghost{color:var(--grey-800);background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:var(--grey-300)}.btn-primary-filled{background-color:var(--primary-400)}.btn-primary-filled:hover{background-color:var(--primary-600)}.btn-primary-filled:active{background-color:var(--primary-900)}.btn-primary-filled:disabled{background-color:var(--primary-100)}.btn-primary-bordered{color:var(--primary-400)}.btn-primary-bordered:hover{background-color:var(--primary-100)}.btn-primary-bordered:active{background-color:var(--primary-300)}.btn-primary-bordered:disabled{background-color:var(--primary-100)}.btn-primary-ghost:hover{background-color:var(--primary-100)}.btn-primary-ghost:active{background-color:var(--primary-300)}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:var(--grey-950)}.btn-black-filled:hover{background-color:var(--secondary-500)}.btn-black-filled:active{background-color:var(--secondary-800)}.btn-black-filled:disabled{background-color:var(--grey-100)}.btn-black-bordered{color:var(--grey-700)}.btn-black-bordered:hover{background-color:var(--secondary-100)}.btn-black-bordered:active{background-color:var(--secondary-300)}.btn-black-bordered:disabled{background-color:var(--grey-50)}.btn-black-ghost:hover{background-color:var(--secondary-100)}.btn-black-ghost:active{background-color:var(--secondary-300)}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:var(--green-400)}.btn-green-filled:hover{background-color:var(--green-600)}.btn-green-filled:active{background-color:var(--green-900)}.btn-green-filled:disabled{background-color:var(--green-100)}.btn-green-bordered{color:var(--green-400)}.btn-green-bordered:hover{background-color:var(--green-100)}.btn-green-bordered:active{background-color:var(--green-300)}.btn-green-bordered:disabled{background-color:var(--green-100)}.btn-green-ghost:hover{background-color:var(--green-100)}.btn-green-ghost:active{background-color:var(--green-300)}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:var(--yellow-400)}.btn-yellow-filled:hover{background-color:var(--yellow-600)}.btn-yellow-filled:active{background-color:var(--yellow-900)}.btn-yellow-filled:disabled{background-color:var(--yellow-100)}.btn-yellow-bordered{color:var(--yellow-400)}.btn-yellow-bordered:hover{background-color:var(--yellow-100)}.btn-yellow-bordered:active{background-color:var(--yellow-300)}.btn-yellow-bordered:disabled{background-color:var(--yellow-100)}.btn-yellow-ghost:hover{background-color:var(--yellow-100)}.btn-yellow-ghost:active{background-color:var(--yellow-300)}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:var(--blue-400)}.btn-blue-filled:hover{background-color:var(--blue-600)}.btn-blue-filled:active{background-color:var(--blue-900)}.btn-blue-filled:disabled{background-color:var(--blue-100)}.btn-blue-bordered{color:var(--blue-400)}.btn-blue-bordered:hover{background-color:var(--blue-100)}.btn-blue-bordered:active{background-color:var(--blue-300)}.btn-blue-bordered:disabled{background-color:var(--blue-100)}.btn-blue-ghost:hover{background-color:var(--blue-100)}.btn-blue-ghost:active{background-color:var(--blue-300)}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:var(--red-400)}.btn-red-filled:hover{background-color:var(--red-600)}.btn-red-filled:active{background-color:var(--red-900)}.btn-red-filled:disabled{background-color:var(--red-100)}.btn-red-bordered{color:var(--red-400)}.btn-red-bordered:hover{background-color:var(--red-100)}.btn-red-bordered:active{background-color:var(--red-300)}.btn-red-bordered:disabled{background-color:var(--red-100)}.btn-red-ghost:hover{background-color:var(--red-100)}.btn-red-ghost:active{background-color:var(--red-300)}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-200)}33%{box-shadow:20px 0 var(--primary-200),-20px 0 var(--primary-600);background:var(--primary-600)}66%{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-600)}to{box-shadow:20px 0 var(--primary-600),-20px 0 var(--primary-200);background:var(--primary-200)}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], rightIcon: [{
+                type: Input
+            }], iconOnly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
 
 function createValueAccessor() {
     class BaseValueAccessor {
@@ -66,7 +106,7 @@ class UicCheckboxComponent extends base$1 {
                 useExisting: forwardRef(() => UicCheckboxComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\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    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\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    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:1rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;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 rgba(var(--secondary-400),.4)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);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}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicCheckboxComponent, decorators: [{
             type: Component,
@@ -76,7 +116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicCheckboxComponent),
                             multi: true
                         }
-                    ], template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\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    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.check-wrapper button{margin-right:8px}.checkbox{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:2px solid #717680;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;outline:none}.checkbox:hover:not(:disabled){border-color:#8230c4}.checkbox:focus,.checkbox:focus-visible{box-shadow:0 0 0 3px #8230c466}.checkbox:disabled{background:#d5d7da;border-color:#d5d7da;cursor:not-allowed}.checkbox:disabled .icon{opacity:.5}.checkbox.checked{background:#752bb0;border-color:#752bb0}.checkbox.checked:hover:not(:disabled){background:#8230c4;border-color:#8230c4}.checkbox.checked .icon{color:#fff}.checkbox.indeterminate{background:#752bb0;border-color:#752bb0}.checkbox.indeterminate .icon{color:#fff}.checkbox .icon{font-size:16px;font-weight:700;color:transparent;line-height:1;transition:color .2s ease}\n"] }]
+                    ], template: "@if (label){\r\n  <label for=\"\">{{label}} </label>\r\n}\r\n<div class=\"check-wrapper\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"checkbox\"\r\n      [disabled]=\"disabled\"\r\n      [class.checked]=\"value\"\r\n      (click)=\"toggle()\"\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    {{placeholder}}\r\n</div>", styles: [".check-wrapper{padding:2px;display:flex;align-items:center;font-size:1rem}.check-wrapper button{margin-right:.5rem}.checkbox{width:22px;height:22px;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 rgba(var(--secondary-400),.4)}.checkbox:disabled{background:var(--grey-300);border-color:var(--grey-300);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}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -87,31 +127,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-class UicSwichComponent {
-    checked = false;
-    checkedChange = new EventEmitter();
+const fadeAndRise = trigger('fadeAndRise', [
+    transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
+]);
+
+const base = createValueAccessor();
+class UicSelectComponent extends base {
+    icon = ''; // Icono externo
+    iconColor = 'primary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    label = '';
+    error = '';
+    tip = '';
     disabled = false;
-    placeholder = '';
-    toggle() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        this.checkedChange.emit(this.checked);
+    nullable = false;
+    options = [];
+    showSubtitle = false;
+    overlayPositions = [
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top'
+        },
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom'
+        }
+    ];
+    open = false;
+    emptyText = '- Seleccionar -';
+    renderer = inject(Renderer2);
+    toggleButton;
+    unlistener;
+    ngOnInit() {
+        this.emptyText = this.disabled ? '-' : '- Seleccionar -';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] });
+    openList() {
+        if (!this.disabled) {
+            this.open = !this.open;
+            if (this.open) {
+                setTimeout(() => {
+                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
+                        if (!this.toggleButton.nativeElement.contains(e.target)) {
+                            this.open = false;
+                            this.unlistener();
+                        }
+                    });
+                }, 200);
+            }
+        }
+    }
+    selectOption(option) {
+        this.open = false;
+        this.unlistener();
+        this.notifyChange(option);
+    }
+    //( overlay)
+    closeList() {
+        this.open = false;
+    }
+    openListOverlay() {
+        if (!this.disabled) {
+            this.open = !this.open;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", nullable: "nullable", options: "options", showSubtitle: "showSubtitle" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => UicSelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: 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\"  [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        <div class=\"fakeinput-wrapp\"  #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                            @if ($index < (options.length - 1)){\r\n                                <div class=\"option-divider\"></div>\r\n                            }\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [fadeAndRise] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-switch', imports: [], template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".toggle-wrapper{padding:2px;display:flex;align-items:center;font-size:16px}.toggle-wrapper button{margin-right:8px}.disabled{color:#d5d7da}.toggle{position:relative;width:44px;height:22px;border:none;border-radius:22px;background:#e9eaeb;cursor:pointer;padding:2px;display:flex;align-items:center;transition:background .2s ease}.toggle:disabled{background:#d5d7da;cursor:not-allowed}.toggle:disabled .thumb{opacity:.7}.toggle:hover:not(:disabled){background:#8230c4}.toggle:focus,.toggle:focus-visible{box-shadow:0 0 0 3px #8230c466}.toggle.checked{background:#752bb0}.toggle.checked:hover:not(:disabled){background:#8230c4}.toggle.checked .thumb{transform:translate(22px)}.toggle .thumb{width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s ease;transform:translate(0)}\n"] }]
-        }], propDecorators: { checked: [{
+            args: [{ selector: 'ui-select', imports: [CommonModule, OverlayModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => UicSelectComponent),
+                            multi: true
+                        }
+                    ], animations: [fadeAndRise], 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\"  [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        <div class=\"fakeinput-wrapp\"  #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                            <div class=\"option-divider\"></div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                            @if ($index < (options.length - 1)){\r\n                                <div class=\"option-divider\"></div>\r\n                            }\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
                 type: Input
-            }], checkedChange: [{
-                type: Output
             }], disabled: [{
                 type: Input
-            }], placeholder: [{
+            }], nullable: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], showSubtitle: [{
+                type: Input
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['inputwrapp']
+            }] } });
+
+class UicInputComponent {
+    icon = ''; // Icono externo
+    iconColor = 'black';
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    // TEXTO
+    label = '';
+    error = '';
+    tip = '';
+    // FUNCTIONS
+    disabled = false;
+    clickButton = new EventEmitter();
+    disableBtn = false;
+    disableButton() {
+        this.clickButton.emit();
+        this.disableBtn = true;
+        setTimeout(() => {
+            this.disableBtn = false;
+        }, 200);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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", styles: [":host{width:100%}.input-container{flex:1 1;padding:.25rem;overflow:hidden}.input-options{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], internalIcon: [{
                 type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clickButton: [{
+                type: Output
+            }] } });
+
+class UicDynamicFormComponent {
+    fields = [];
+    form;
+    flag = false;
+    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" }, ngImport: i0, template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\">\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            />\r\n        </ui-input>\r\n\r\n      }\r\n\r\n      @if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}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}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "nullable", "options", "showSubtitle"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dynamic-form', imports: [ReactiveFormsModule, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\">\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            />\r\n        </ui-input>\r\n\r\n      }\r\n\r\n      @if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:1rem;padding-bottom:1.5rem}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}\n"] }]
+        }], propDecorators: { fields: [{
+                type: Input
+            }], form: [{
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
 class UicSkeletonLoaderComponent {
@@ -123,1089 +313,768 @@ class UicSkeletonLoaderComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonLoaderComponent, isStandalone: true, selector: "ui-skeleton-loader", inputs: { inputs: "inputs", cols: "cols" }, ngImport: i0, template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-input-label\"></div>\r\n            <div class=\"skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSkeletonLoaderComponent, isStandalone: true, selector: "ui-skeleton-loader", inputs: { inputs: "inputs", cols: "cols" }, ngImport: i0, template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSkeletonLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-skeleton-loader', imports: [CommonModule], template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-input-label\"></div>\r\n            <div class=\"skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-input-label{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:20px;width:80%;margin-bottom:8px}.skeleton-input{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+            args: [{ selector: 'ui-skeleton-loader', imports: [CommonModule], template: "<div class=\"skeleton-form\" [ngStyle]=\"gridStyle\">\r\n    @for (r of [].constructor(inputs); track $index) {\r\n        <div class=\"skeleton-input-container\">\r\n            <div class=\"skeleton-gradient skeleton-label\"></div>\r\n            <div class=\"skeleton-gradient skeleton-input\"></div>\r\n        </div>\r\n    }\r\n</div>", styles: [".skeleton-form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding:24px 0}.skeleton-gradient{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--input-radius)}.skeleton-label{height:20px;width:50%;margin-bottom:var(--input-label-space)}.skeleton-input{height:40px;width:100%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
         }], propDecorators: { inputs: [{
                 type: Input
             }], cols: [{
                 type: Input
             }] } });
 
-let nextId = 1;
-function createSuccessAlert(message, options) {
-    return {
-        id: nextId++,
-        message,
-        type: 'success',
-        duration: 3000,
-        ...options,
-    };
-}
-function createErrorAlert(message, options) {
-    return {
-        id: nextId++,
-        message,
-        type: 'error',
-        duration: 5000,
-        ...options,
-    };
-}
-function createWarningAlert(message, options) {
-    return {
-        id: nextId++,
-        message,
-        type: 'warning',
-        duration: 4000,
-        ...options,
-    };
-}
-function createInfoAlert(message, options) {
-    return {
-        id: nextId++,
-        message,
-        type: 'info',
-        duration: 3000,
-        ...options,
-    };
-}
-
-class UicPushAlertService {
-    autoIncId = 0;
-    alerts$ = new Subject();
-    get stream() {
-        return this.alerts$.asObservable();
-    }
-    show(alertData) {
-        this.autoIncId++;
-        const alert = { ...alertData, id: this.autoIncId };
-        this.alerts$.next(alert);
-    }
-    success(message, options) {
-        this.show(createSuccessAlert(message, options));
-    }
-    error(message, options) {
-        this.show(createErrorAlert(message, options));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class AlertComponent {
-    alert;
-    closeAlert = new EventEmitter();
-    interval;
-    progressValue = 0;
-    animationIntevalMs = 100;
-    pauseAnimation = false;
-    id = 0;
+class UicFormWrapperComponent {
+    schema;
+    loading = false;
+    initialValues = {};
+    useSteps = false;
+    formSubmit = new EventEmitter();
+    fb = inject(FormBuilder);
+    form = this.fb.group({});
+    currentStep = 0;
     ngOnInit() {
-        this.id = this.alert.id;
-        if (this.alert.duration && this.alert.duration > 0) {
-            const duration = this.alert.duration;
-            let count = 0;
-            this.interval = setInterval(() => {
-                count = this.pauseAnimation ? count : count + this.animationIntevalMs;
-                this.progressValue = Math.floor((count / duration) * 100);
-                if (this.progressValue > 100) {
-                    this.close();
-                }
-            }, this.animationIntevalMs);
+        this.buildForm();
+        this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['schema']) {
+            this.buildForm();
+            this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
+            if (this.useSteps && this.schema?.steps) {
+                this.currentStep = Math.min(this.currentStep, (this.schema.steps.length - 1) || 0);
+            }
         }
     }
-    close() {
-        clearInterval(this.interval);
-        this.closeAlert.emit(this.id);
+    handleSubmit() {
+        if (this.form.valid) {
+            this.formSubmit.emit({ result: true, form: this.form.value });
+        }
+        else {
+            this.form.markAllAsTouched();
+            this.formSubmit.emit({ result: false, form: null });
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { alert: "alert" }, outputs: { closeAlert: "closeAlert" }, ngImport: i0, template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\"  >\r\n    @if (alert.showProgressBar) {\r\n        <div class=\"alert-process\">\r\n            <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n    }\r\n    <div class=\"alert-body\">\r\n        <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n        @if (alert.icon) {\r\n            <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n        }\r\n        <div>\r\n            <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n            <div class=\"toast-body\">{{alert.message}}</div>\r\n            @if ( alert.okButtonText || alert.cancelButtonText){\r\n                <div class=\"toast-buttons \">\r\n                    @if ( alert.okButtonText ) {\r\n                        <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n                    }\r\n                    @if ( alert.cancelButtonText ){\r\n                        <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:#fff;border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:#fff}.filled.success{background:#15803d}.filled.error{background:#d92d20}.filled.warning{background:#dc6803}.filled.info{background:#6193d5}.bordered{border:solid 1px;color:#717680}.bordered.success{border-color:#15803d;background:#bbf7d0}.bordered.success .highlighted,.bordered.success button{color:#15803d}.bordered.error{border-color:#d92d20;background:#fee4e2}.bordered.error .highlighted,.bordered.error button{color:#d92d20}.bordered.warning{border-color:#dc6803;background:#fef0c7}.bordered.warning .highlighted,.bordered.warning button{color:#dc6803}.bordered.info{border-color:#6193d5;background:#e4eefb}.bordered.info .highlighted,.bordered.info button{color:#6193d5}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-alert', imports: [], template: "<div [class]=\"'alert ' + alert.type + ' ' + (alert.style??'filled')\"  >\r\n    @if (alert.showProgressBar) {\r\n        <div class=\"alert-process\">\r\n            <div class=\"alert-process-bar\" [style.width.%]=\"progressValue\"></div>\r\n        </div>\r\n    }\r\n    <div class=\"alert-body\">\r\n        <button class=\"close\" (click)=\"close()\"> \u2715 </button>\r\n        @if (alert.icon) {\r\n            <i [class]=\"'highlighted ' + alert.icon\"></i>\r\n        }\r\n        <div>\r\n            <div class=\"toast-title highlighted\">{{alert.title}}</div>\r\n            <div class=\"toast-body\">{{alert.message}}</div>\r\n            @if ( alert.okButtonText || alert.cancelButtonText){\r\n                <div class=\"toast-buttons \">\r\n                    @if ( alert.okButtonText ) {\r\n                        <button style=\"font-weight: 500;\">{{alert.okButtonText}}</button>\r\n                    }\r\n                    @if ( alert.cancelButtonText ){\r\n                        <button (click)=\"close()\">{{alert.cancelButtonText}}</button>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [".alert{display:flex;flex-direction:column;min-width:250px;max-width:450px;overflow:hidden;animation:fadeIn .3s ease;border-radius:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-process{width:100%;height:4px;background-color:#0000004f;display:flex}.alert-process-bar{background-color:#ffffff69;height:4px}.alert-body{position:relative;padding:16px;display:flex}.alert-body i{font-size:20;width:22px;height:22px;margin-right:16px}.toast-title{font-weight:500;font-size:16px;line-height:24px}.toast-body{font-weight:400;font-size:14px;line-height:20px}.toast-buttons{margin-top:16px;display:flex;gap:16px}.toast-buttons button{color:#fff;border:none;background-color:transparent;font-size:16px;line-height:24px;padding:0}.toast-buttons button:hover{text-decoration:underline;cursor:pointer}.close{background:transparent;border:none;color:inherit;font-size:16px;cursor:pointer;position:absolute;right:5px;top:5px}.filled{color:#fff}.filled.success{background:#15803d}.filled.error{background:#d92d20}.filled.warning{background:#dc6803}.filled.info{background:#6193d5}.bordered{border:solid 1px;color:#717680}.bordered.success{border-color:#15803d;background:#bbf7d0}.bordered.success .highlighted,.bordered.success button{color:#15803d}.bordered.error{border-color:#d92d20;background:#fee4e2}.bordered.error .highlighted,.bordered.error button{color:#d92d20}.bordered.warning{border-color:#dc6803;background:#fef0c7}.bordered.warning .highlighted,.bordered.warning button{color:#dc6803}.bordered.info{border-color:#6193d5;background:#e4eefb}.bordered.info .highlighted,.bordered.info button{color:#6193d5}\n"] }]
-        }], propDecorators: { alert: [{
-                type: Input
-            }], closeAlert: [{
-                type: Output
-            }] } });
-
-class AlertContainerComponent {
-    alertService;
-    alerts = [];
-    constructor(alertService) {
-        this.alertService = alertService;
+    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 ?? []);
     }
-    ngOnInit() {
-        this.alertService.stream.subscribe(alert => {
-            this.alerts.push(alert);
+    buildForm() {
+        const fields = this.collectAllFields();
+        fields.forEach(f => {
+            if (!this.form.contains(f.name)) {
+                const validators = this.mapValidatorsFromField(f);
+                let initial = this.initialValues[f.name] ?? null;
+                if (f.type == 'checkbox' && initial == null)
+                    initial = false;
+                this.form.addControl(f.name, this.fb.control(initial, validators));
+            }
+        });
+        const namesToKeep = new Set(fields.map(f => f.name));
+        Object.keys(this.form.controls).forEach(name => {
+            if (!namesToKeep.has(name)) {
+                this.form.removeControl(name);
+            }
         });
     }
-    dismis(id) {
-        const idx = this.alerts.findIndex(f => f.id == id);
-        this.alerts.splice(idx, 1);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, deps: [{ token: UicPushAlertService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AlertContainerComponent, isStandalone: true, selector: "lib-alert-container", ngImport: i0, template: "<div class=\"alert-container\">\r\n    @for (alert of alerts; track alert.id){\r\n        <lib-alert\r\n            (closeAlert)=\"dismis($event)\"\r\n            [alert]=\"alert\">\r\n        </lib-alert>\r\n    }     \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "lib-alert", inputs: ["alert"], outputs: ["closeAlert"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-alert-container', imports: [AlertComponent], template: "<div class=\"alert-container\">\r\n    @for (alert of alerts; track alert.id){\r\n        <lib-alert\r\n            (closeAlert)=\"dismis($event)\"\r\n            [alert]=\"alert\">\r\n        </lib-alert>\r\n    }     \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
-        }], ctorParameters: () => [{ type: UicPushAlertService }] });
-
-class UicButtonComponent {
-    text = '';
-    icon = '';
-    rightIcon = '';
-    iconOnly = false;
-    disabled = false;
-    loading = false;
-    size = 'm';
-    type = 'filled';
-    color = 'primary';
-    buttonTypeClass = "";
-    ngOnInit() {
-        this.buttonTypeClass = 'btn-' + this.type + ' btn-' + this.color + "-" + this.type;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicButtonComponent, isStandalone: true, selector: "ui-button", inputs: { text: "text", icon: "icon", rightIcon: "rightIcon", iconOnly: "iconOnly", disabled: "disabled", loading: "loading", size: "size", type: "type", color: "color" }, ngImport: i0, template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n    [class]=\"'main-btn ' + buttonTypeClass\"\r\n    [disabled]=\"disabled || loading\"\r\n    [ngClass]=\"{\r\n                'btn-tiny'      :size=='t',\r\n                'btn-small'     :size=='s',  \r\n                'btn-medium'    :size=='m',\r\n                'btn-large'     :size=='l', \r\n                'btn-gigant'    :size=='g'\r\n                }\" >\r\n    \r\n    @if (!loading) {\r\n        @if (icon!='' ) {\r\n            <i class=\"{{icon}}\"></i>\r\n        }\r\n        @if (!iconOnly) {\r\n            <div class=\"btn-text\" [class.norighticon]=\"rightIcon==''\" [class.noicon]=\"icon==''\">\r\n                {{text}}\r\n                <ng-content ></ng-content>\r\n            </div>\r\n        }\r\n        @if (rightIcon!='' ) {\r\n            <i class=\"{{rightIcon}}\"></i>\r\n        }\r\n    } @else {\r\n        <div class=\"btn-loader-container\"> <div class=\"btn-loader\"></div> </div>\r\n    }\r\n</button>", styles: [":host{width:fit-content;display:block}.main-btn{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border:none;text-align:center;border-radius:8px;padding:0;white-space:nowrap;outline:none}.main-btn:focus,.main-btn:focus-visible{box-shadow:0 0 0 3px #8230c466}.noicon{padding-left:16px}.norighticon{padding-right:16px}.btn-text{font-weight:500}.btn-tiny{height:22px;min-width:22px}.btn-tiny>.btn-text{font-size:10px;line-height:22px}.btn-tiny i{font-size:14px;line-height:22px;width:22px}.btn-tiny .btn-loader{line-height:10px;width:10px}.btn-small{height:30px;min-width:30px}.btn-small>.btn-text{font-size:12px;line-height:30px}.btn-small i{font-size:16px;line-height:30px;width:30px}.btn-small .btn-loader{line-height:12px;width:12px}.btn-medium{height:38px;min-width:38px}.btn-medium>.btn-text{font-size:14px;line-height:38px}.btn-medium i{font-size:24px;line-height:38px;width:38px}.btn-medium .btn-loader{line-height:14px;width:14px}.btn-large{height:46px;min-width:46px}.btn-large>.btn-text{font-size:16px;line-height:46px}.btn-large i{font-size:24px;line-height:46px;width:46px}.btn-large .btn-loader{line-height:16px;width:16px}.btn-gigant{height:54px;min-width:54px}.btn-gigant>.btn-text{font-size:18px;line-height:54px}.btn-gigant i{font-size:24px;line-height:54px;width:54px}.btn-gigant .btn-loader{line-height:18px;width:18px}.btn-filled{color:#fff;transition:background .3s ease;cursor:pointer}.btn-filled:disabled{cursor:not-allowed;color:#d5d7da}.btn-bordered{border:solid 1px #e9eaeb;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-bordered:disabled{cursor:not-allowed;color:#d5d7da;border-color:#d5d7da}.btn-ghost{color:#252b37;background-color:transparent;transition:background .3s ease;cursor:pointer}.btn-ghost:disabled{cursor:not-allowed;color:#d5d7da}.btn-primary-filled{background-color:#63277d}.btn-primary-filled:hover{background-color:#4f1f64}.btn-primary-filled:active{background-color:#2d1238}.btn-primary-filled:disabled{background-color:#efe9f2}.btn-primary-bordered{color:#63277d}.btn-primary-bordered:hover{background-color:#efe9f2}.btn-primary-bordered:active{background-color:#cfbcd7}.btn-primary-bordered:disabled{background-color:#efe9f2}.btn-primary-ghost:hover{background-color:#efe9f2}.btn-primary-ghost:active{background-color:#cfbcd7}.btn-primary-ghost:disabled{background-color:transparent}.btn-black-filled{background-color:#0a0d12}.btn-black-filled:hover{background-color:#752bb0}.btn-black-filled:active{background-color:#4e1d76}.btn-black-filled:disabled{background-color:#f5f5f5}.btn-black-bordered{color:#414651}.btn-black-bordered:hover{background-color:#f3eaf9}.btn-black-bordered:active{background-color:#d8bfed}.btn-black-bordered:disabled{background-color:#fafafa}.btn-black-ghost:hover{background-color:#f3eaf9}.btn-black-ghost:active{background-color:#d8bfed}.btn-black-ghost:disabled{background-color:transparent}.btn-green-filled{background-color:#22c55e}.btn-green-filled:hover{background-color:#15803d}.btn-green-filled:active{background-color:#1a2e21}.btn-green-filled:disabled{background-color:#bbf7d0}.btn-green-bordered{color:#22c55e}.btn-green-bordered:hover{background-color:#bbf7d0}.btn-green-bordered:active{background-color:#4ade80}.btn-green-bordered:disabled{background-color:#bbf7d0}.btn-green-ghost:hover{background-color:#bbf7d0}.btn-green-ghost:active{background-color:#4ade80}.btn-green-ghost:disabled{background-color:transparent}.btn-yellow-filled{background-color:#fdb022}.btn-yellow-filled:hover{background-color:#dc6803}.btn-yellow-filled:active{background-color:#792e0d}.btn-yellow-filled:disabled{background-color:#fef0c7}.btn-yellow-bordered{color:#fdb022}.btn-yellow-bordered:hover{background-color:#fef0c7}.btn-yellow-bordered:active{background-color:#fec84b}.btn-yellow-bordered:disabled{background-color:#fef0c7}.btn-yellow-ghost:hover{background-color:#fef0c7}.btn-yellow-ghost:active{background-color:#fec84b}.btn-yellow-ghost:disabled{background-color:transparent}.btn-blue-filled{background-color:#93bbf0}.btn-blue-filled:hover{background-color:#6193d5}.btn-blue-filled:active{background-color:#273b55}.btn-blue-filled:disabled{background-color:#e4eefb}.btn-blue-bordered{color:#93bbf0}.btn-blue-bordered:hover{background-color:#e4eefb}.btn-blue-bordered:active{background-color:#aeccf4}.btn-blue-bordered:disabled{background-color:#e4eefb}.btn-blue-ghost:hover{background-color:#e4eefb}.btn-blue-ghost:active{background-color:#aeccf4}.btn-blue-ghost:disabled{background-color:transparent}.btn-red-filled{background-color:#f97066}.btn-red-filled:hover{background-color:#d92d20}.btn-red-filled:active{background-color:#7a271a}.btn-red-filled:disabled{background-color:#fee4e2}.btn-red-bordered{color:#f97066}.btn-red-bordered:hover{background-color:#fee4e2}.btn-red-bordered:active{background-color:#fda29b}.btn-red-bordered:disabled{background-color:#fee4e2}.btn-red-ghost:hover{background-color:#fee4e2}.btn-red-ghost:active{background-color:#fda29b}.btn-red-ghost:disabled{background-color:transparent}.btn-loader{width:14px;aspect-ratio:1;border-radius:50%;animation:l5 1s infinite linear alternate;margin:2px}.btn-loader-container{line-height:14px;margin:3px 0;display:flex;justify-content:center;width:65px}@keyframes l5{0%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#e8dfec}33%{box-shadow:20px 0 #e8dfec,-20px 0 #4f1f64;background:#4f1f64}66%{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#4f1f64}to{box-shadow:20px 0 #4f1f64,-20px 0 #e8dfec;background:#e8dfec}}.btn-loader:before,.btn-loader:after{content:\"\";grid-area:1/1;margin:15%;border-radius:50%;background:inherit;transform:rotate(0) translate(150%);animation:l22 1s infinite}.btn-loader:after{animation-delay:-.5s}@keyframes l22-0{to{transform:rotate(1turn)}}@keyframes l22{to{transform:rotate(1turn) translate(150%)}}\n"] }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], rightIcon: [{
-                type: Input
-            }], iconOnly: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-class UicTableUicSearcherComponent {
-    placeholder = '';
-    label = 'Buscar';
-    searchOnKeydown = false;
-    search = new EventEmitter();
-    text = "";
-    reset() {
-        this.text = '';
-        this.search.emit(this.text);
+    mapValidatorsFromField(f) {
+        const validators = [];
+        if (f.required)
+            validators.push(Validators.required);
+        if (typeof f.min === 'number')
+            validators.push(Validators.min(f.min));
+        if (typeof f.max === 'number')
+            validators.push(Validators.max(f.max));
+        if (f.pattern instanceof RegExp)
+            validators.push(Validators.pattern(f.pattern));
+        return validators;
     }
-    updateText() {
-        if (this.searchOnKeydown) {
-            this.search.emit(this.text);
+    getCurrentBlocks() {
+        if (!this.schema)
+            return [];
+        if (this.useSteps) {
+            const step = this.schema.steps?.[this.currentStep];
+            return step?.blocks ?? [];
         }
+        return this.schema.blocks ?? [];
     }
-    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: "table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown" }, outputs: { search: "search" }, 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)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"search.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: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px #e9eaeb;height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\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,
-            args: [{ selector: 'table-searcher', imports: [UicButtonComponent, FormsModule], 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)=\"search.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </div>\r\n    <ui-button (click)=\"search.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: 767px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px #e9eaeb;height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:#4f1f64}\n"] }]
-        }], propDecorators: { placeholder: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], searchOnKeydown: [{
-                type: Input
-            }], search: [{
-                type: Output
-            }] } });
-
-class UicTablePaginationComponent {
-    currentPage = 1;
-    totalPages = 1;
-    size = 25;
-    loading = false;
-    visiblePages = 3;
-    pagesInView = [];
-    pageChange = new EventEmitter();
-    sizeChange = new EventEmitter();
-    get pages() {
-        const pages = [];
-        const range = Math.floor(this.visiblePages / 2);
-        let start = Math.max(1, this.currentPage - range);
-        let end = Math.min(this.totalPages, this.currentPage + range);
-        if (end === this.totalPages) {
-            start = Math.max(1, this.totalPages - (this.visiblePages - 1));
-        }
-        if (start === 1) {
-            end = Math.min(this.totalPages, this.visiblePages);
-        }
-        if (start > 1) {
-            pages.push(1);
-            if (start > 2)
-                pages.push('...');
-        }
-        for (let i = start; i <= end; i++) {
-            pages.push(i);
-        }
-        if (end < this.totalPages) {
-            if (end < this.totalPages - 1)
-                pages.push('...');
-            pages.push(this.totalPages);
+    nextStep() {
+        const stepsCount = this.schema?.steps?.length ?? 0;
+        if (this.useSteps && this.currentStep < stepsCount - 1) {
+            this.currentStep++;
         }
-        return pages;
     }
-    changePage(newPage) {
-        if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
-            this.currentPage = newPage;
-            this.pageChange.emit(this.currentPage);
+    prevStep() {
+        if (this.useSteps && this.currentStep > 0) {
+            this.currentStep--;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "app-table-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n    <!-- <div class=\"page-size\">\r\n        <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n            <option value=\"25\">25</option>\r\n            <option value=\"50\">50</option>\r\n            <option value=\"100\">100</option>\r\n        </select>\r\n        elementos por p\u00E1gina\r\n    </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\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: "ngmodule", type: FormsModule }] });
+    getStepTitle() {
+        return this.schema.steps?.[this.currentStep]?.title ?? '';
+    }
+    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", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\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            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\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\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            [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"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n    <!-- <div class=\"page-size\">\r\n        <select [(ngModel)]=\"size\" (ngModelChange)=\"sizeChange.emit(+size)\" [disabled]=\"loading\">\r\n            <option value=\"25\">25</option>\r\n            <option value=\"50\">50</option>\r\n            <option value=\"100\">100</option>\r\n        </select>\r\n        elementos por p\u00E1gina\r\n    </div> -->\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:#717680;width:40px;height:40px;background-color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:#752bb0}.selected{background-color:#f5f5f5;font-weight:600;color:#752bb0}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:#717680;align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:#717680;border:solid 1px #592371;border-radius:5px}\n"] }]
-        }], propDecorators: { currentPage: [{
-                type: Input
-            }], totalPages: [{
-                type: Input
-            }], size: [{
+            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\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            <div class=\"block-title\">{{ block.title }}</div>\r\n            <ui-dynamic-form\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\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            [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"] }]
+        }], propDecorators: { schema: [{
                 type: Input
             }], loading: [{
                 type: Input
-            }], pageChange: [{
-                type: Output
-            }], sizeChange: [{
-                type: Output
-            }] } });
-
-class UicTableListComponent {
-    list = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "app-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table-list', imports: [], template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:#717680;margin-right:5px}.list-item-data p{color:#d5d7da;font-size:13px}\n"] }]
-        }], propDecorators: { list: [{
+            }], initialValues: [{
                 type: Input
+            }], formSubmit: [{
+                type: Output
             }] } });
 
-class UicNameInitsPipe {
-    transform(value) {
-        if (!value) {
-            return "";
-        }
-        const names = value.split(" ");
-        if (names.length > 1) {
-            return names[0].charAt(0) + names[1].charAt(0).toUpperCase();
-        }
-        else if (names[0].length >= 2) {
-            return names[0].substring(0, 2).toUpperCase();
-        }
-        else {
-            return '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, isStandalone: true, name: "nameInitials" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'nameInitials'
-                }]
-        }] });
-
-class UicTableUserComponent {
-    user;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "app-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px #68269d;background-color:#d8bfed;color:#68269d;display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:#181d27;font-size:14px}.user-row-data p{color:#717680;font-weight:400;font-size:12px;line-height:16px}\n"] }]
-        }], propDecorators: { user: [{
-                type: Input
-            }] } });
-
-const fadeAndRise = trigger('fadeAndRise', [
-    transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
-    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
-]);
-
-class TooltipComponent {
-    tooltip = '';
-    left = 0;
-    top = 0;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TooltipComponent, isStandalone: true, selector: "app-tooltip", ngImport: i0, template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:#0a0d12;-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:calc(50% - 8px);top:-8px}\n"], animations: [fadeAndRise] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:#0a0d12;-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #ffffff;position:absolute;left:calc(50% - 8px);top:-8px}\n"] }]
-        }] });
-
-class UicToolTipDirective {
-    elementRef;
-    appRef;
-    injector;
+class UicSearcherComponent {
+    renderer;
+    overlay;
+    positionBuilder;
+    vcr;
+    icon = ''; // Icono externo
+    iconColor = 'secondary'; //color de ícono externo
+    internalIcon = ''; //Icono interno
+    size = 'm'; // tamaño general del input
+    // TEXTO
+    label = '';
+    error = '';
     tip = '';
-    componentRef = null;
-    constructor(elementRef, appRef, injector) {
-        this.elementRef = elementRef;
-        this.appRef = appRef;
-        this.injector = injector;
+    // FUNCTIONS
+    disabled = false;
+    showSelected = true;
+    placeholder = 'Buscar...';
+    open = false;
+    searchFn;
+    itemDisplayFn = item => String(item);
+    itemIsEnabledFn = () => true;
+    manualSearch = false;
+    selectedItem = null;
+    selectedItemChange = new EventEmitter();
+    isLoading = false;
+    searchText = '';
+    searchSubject = new Subject();
+    results$;
+    toggleButton;
+    unlistener;
+    constructor(renderer, overlay, positionBuilder, vcr) {
+        this.renderer = renderer;
+        this.overlay = overlay;
+        this.positionBuilder = positionBuilder;
+        this.vcr = vcr;
+        this.results$ = this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), tap(() => this.isLoading = true), switchMap(v => {
+            if (v.length < 3) {
+                this.isLoading = false;
+                return of([]);
+            }
+            return this.searchFn(v).pipe(finalize(() => this.isLoading = false));
+        }));
     }
-    onMouseEnter() {
-        if (this.componentRef === null && this.tip != '' && this.tip != null) {
-            this.componentRef = createComponent(TooltipComponent, {
-                environmentInjector: this.injector
-            });
-            this.appRef.attachView(this.componentRef.hostView);
-            const domElem = this.componentRef.hostView
-                .rootNodes[0];
-            document.body.appendChild(domElem);
-            this.setTooltipComponentProperties();
+    openList() {
+        if (!this.disabled && !this.open) {
+            this.open = true;
+            this.openOverlay();
+            if (this.open) {
+                setTimeout(() => {
+                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
+                        if (!this.toggleButton.nativeElement.contains(e.target)) {
+                            this.clearSearch();
+                            this.unlistener();
+                        }
+                    });
+                }, 200);
+            }
         }
     }
-    setTooltipComponentProperties() {
-        if (this.componentRef !== null) {
-            this.componentRef.instance.tooltip = this.tip;
-            const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
-            this.componentRef.instance.left = (right - left) / 2 + left;
-            this.componentRef.instance.top = bottom;
+    onSearchChange(value) {
+        this.searchText = value;
+        if (!this.manualSearch) {
+            this.searchSubject.next(value);
         }
     }
-    onMouseLeave() {
-        this.destroy();
-    }
-    ngOnDestroy() {
-        this.destroy();
+    triggerSearch() {
+        this.searchSubject.next(this.searchText);
     }
-    destroy() {
-        if (this.componentRef !== null) {
-            this.appRef.detachView(this.componentRef.hostView);
-            this.componentRef.destroy();
-            this.componentRef = null;
+    selectItem(item) {
+        if (this.itemIsEnabledFn(item)) {
+            this.clearSearch();
+            this.selectedItemChange.emit(item);
+            if (this.showSelected)
+                this.selectedItem = item;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UicToolTipDirective, isStandalone: true, selector: "[tip]", inputs: { tip: "tip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tip]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tip: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-const highlightRow = trigger('highlightRow', [
-    state('highlighted', style({ backgroundColor: '#efe1f5' })),
-    transition('* => highlighted', [
-        animate('1000ms ease-in', keyframes([
-            style({ backgroundColor: '#ffffff', offset: 0 }),
-            style({ backgroundColor: '#efe1f5', offset: 0.3 }),
-            style({ backgroundColor: '#ffffff', offset: 1.0 }),
-        ]))
-    ])
-]);
-
-const animatedRow = trigger('animatedRow', [
-    transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(-15px)' }),
-        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-    ]),
-    transition(':leave', [
-        animate('300ms ease-in', style({ opacity: 0, height: 0, padding: 0, margin: 0 }))
-    ]),
-]);
-
-class UicTableComponent {
-    columns = [];
-    data = [];
-    loading = false;
-    pages = 0;
-    size = 25;
-    highlightedId = 0;
-    headerText = '';
-    totalItems = 0;
-    searchEnabled = true;
-    searchLabel = 'Buscar';
-    searchPlaceholder = 'Buscar';
-    striped = false;
-    showPagination = true;
-    showEmptyMessage = false;
-    emptyMessage = 'No hay elementos';
-    action = new EventEmitter();
-    update = new EventEmitter();
-    checkedChange = new EventEmitter();
-    checkedIds = new Set();
-    sortKey = '';
-    sortAsc = true;
-    filter = '';
-    page = 1;
-    getValue(data, key) {
-        const col = data.find(col => col.key == key);
-        return col?.value ?? '-';
-    }
-    getFontColor(data, key) {
-        const col = data.find(col => col.key == key);
-        return 'trc-' + (col?.textColor ?? 'black');
-    }
-    getBackgroundColor(data, key) {
-        const col = data.find(col => col.key == key);
-        return col?.color ?? 'transparent';
-    }
-    isValidRule(data, key) {
-        if (!key)
-            return true;
-        let valid = true;
-        key.forEach(k => {
-            const col = data.find(col => col.key == k);
-            valid = valid && !!(col?.value);
-        });
-        return valid;
-    }
-    getIcon(data, key) {
-        const col = data.find(col => col.key == key);
-        return '<i class="' + col?.icon + '"></i>';
-    }
-    getList(data, key) {
-        const col = data.find(col => col.key == key);
-        return col?.list ?? [];
+    clearSearch() {
+        this.searchText = '';
+        this.open = false;
+        this.closeOverlay();
+        this.searchSubject.next('');
     }
-    getUser(data, key) {
-        const col = data.find(col => col.key == key);
-        return col?.user;
+    unselect() {
+        this.selectedItem = null;
+        this.selectedItemChange.emit(null);
     }
-    sortClick(key) {
-        if (this.sortKey != key) {
-            this.sortKey = key;
-            this.sortAsc = true;
-        }
-        else if (this.sortAsc) {
-            this.sortAsc = false;
-        }
-        else {
-            this.sortKey = '';
-            this.sortAsc = true;
+    dropdownTemplateRef;
+    overlayRef;
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
-        this.updateData();
-    }
-    sizeChabge(newSize) {
-        this.size = newSize;
-        this.updateData();
-    }
-    pageChage(newPage) {
-        this.page = newPage;
-        this.updateData();
-    }
-    search(text) {
-        this.filter = text;
-        this.updateData();
     }
-    updateData() {
-        this.update.emit({
-            sortBy: this.sortKey,
-            isSortAscending: this.sortAsc,
-            pageNumber: this.page,
-            pageSize: this.size,
-            filter: this.filter
+    openOverlay() {
+        if (this.overlayRef)
+            return;
+        const width = this.toggleButton.nativeElement.getBoundingClientRect().width;
+        const positionStrategy = this.positionBuilder
+            .flexibleConnectedTo(this.toggleButton)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+            }
+        ])
+            .withFlexibleDimensions(false)
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'transparent-backdrop'
         });
+        const templatePortal = new TemplatePortal(this.dropdownTemplateRef, this.vcr);
+        this.overlayRef.attach(templatePortal);
+        this.overlayRef.backdropClick().subscribe(() => this.closeOverlay());
+        this.overlayRef.overlayElement.style.width = `${width}px`;
     }
-    toggleSelection(id, checked) {
-        if (checked) {
-            this.checkedIds.add(id);
-        }
-        else {
-            this.checkedIds.delete(id);
-        }
-        this.areAllSelected();
-        this.checkedChange.emit(Array.from(this.checkedIds));
-    }
-    toggleAll(checked) {
-        if (checked) {
-            this.data.forEach(item => this.checkedIds.add(item.id));
-        }
-        else {
-            this.checkedIds.clear();
-        }
-        this.checkedChange.emit(Array.from(this.checkedIds));
-    }
-    areAllSelected() {
-        this.allSelected = this.checkedIds.size === this.data.length;
-    }
-    allSelected = false;
-    ngOnChanges() {
-        this.areAllSelected();
-    }
-    doAction(rowId, key) {
-        this.action.emit({ rowId, key });
-    }
-    resetCheckedIds() {
-        this.checkedIds.clear();
-        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", 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        <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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                                \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                                    <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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        <app-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </app-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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: "app-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "app-table-list", inputs: ["list"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "table-searcher", inputs: ["placeholder", "label", "searchOnKeydown"], outputs: ["search"] }, { kind: "component", type: UicTablePaginationComponent, selector: "app-table-pagination", inputs: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { 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] });
+    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{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: UicTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSearcherComponent, 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        <table-searcher (search)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></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(10); 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                                \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                                    <app-table-list [list]=\"getList(row.data,header.key)\"></app-table-list>                 \r\n                                }\r\n                                @else if (header.type == 'user'){\r\n                                    <app-table-user [user]=\"getUser(row.data,header.key)\"></app-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        <app-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </app-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px #e9eaeb;border-radius:12px}table{width:100%;font-weight:400;color:#535862}table th{font-size:12px;height:44px;font-weight:500;background-color:#fafafa;border-left:solid 6px #fafafa}table th .th-wrap{white-space:nowrap;display:flex;align-items: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:#a4a7ae}table th .th-wrap div:hover{color:#592371}table td{font-size:14px;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px #e9eaeb}table tr{transition:ease .3s}table tr:hover{background-color:#fafafa}.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:#181d27;border-bottom:solid 1px #e9eaeb}.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:#752bb0!important;border:solid 1px}.empty{text-align:center;color:#d5d7da}.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:#f04438;color:#fff;border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(#592371 0 0);background:var(--c),var(--c),#592371;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:#fafafa;transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:#592371}.tr-highlighted{border-left:solid 6px #16a34a}.trc-primary{color:#592371}.trc-red{color:#f04438}.trc-blue{color:#78aaec}.trc-green{color:#16a34a}.trc-yellow{color:#f79009}.trc-black{color:#181d27}.trc-grey{color:#d5d7da}.row-loader{background:linear-gradient(90deg,#e0e0e0 25%,#f5f5f5,#e0e0e0 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: [{
+            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{position:absolute;border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:.875rem;z-index:50;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)}.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:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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(--grey-300)}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:var(--grey-200);color:var(--grey-800)}.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(--grey-200);color:var(--red-500)}.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 3px var(--primary-400)}.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(--grey-300);padding:5px;text-align:center}.disabledinput{background-color:var(--grey-50) -disabled;color:var(--grey-800)}.disabledinput ::ng-deep input{color:var(--grey-800)}.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(--grey-300)}.item-disabled:hover{background-color:var(--white);cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$1.Overlay }, { type: i1$1.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
                 type: Input
-            }], loading: [{
+            }], iconColor: [{
                 type: Input
-            }], pages: [{
+            }], internalIcon: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], highlightedId: [{
+            }], label: [{
                 type: Input
-            }], headerText: [{
+            }], error: [{
                 type: Input
-            }], totalItems: [{
+            }], tip: [{
                 type: Input
-            }], searchEnabled: [{
+            }], disabled: [{
                 type: Input
-            }], searchLabel: [{
+            }], showSelected: [{
                 type: Input
-            }], searchPlaceholder: [{
+            }], placeholder: [{
                 type: Input
-            }], striped: [{
+            }], searchFn: [{
                 type: Input
-            }], showPagination: [{
+            }], itemDisplayFn: [{
                 type: Input
-            }], showEmptyMessage: [{
+            }], itemIsEnabledFn: [{
                 type: Input
-            }], emptyMessage: [{
+            }], manualSearch: [{
                 type: Input
-            }], action: [{
-                type: Output
-            }], update: [{
-                type: Output
-            }], checkedChange: [{
+            }], selectedItem: [{
+                type: Input
+            }], selectedItemChange: [{
                 type: Output
+            }], toggleButton: [{
+                type: ViewChild,
+                args: ['inputwrapp']
+            }], dropdownTemplateRef: [{
+                type: ViewChild,
+                args: ['dropdownTemplate']
             }] } });
 
-;
-;
-
-const pushTop = trigger('pushTop', [
-    transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
-    transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
-]);
-
-const sideModal = trigger('sideModal', [
-    state('visible', style({ transform: 'translateX(0)' })),
-    state('hidden', style({ transform: 'translateX(100%)' })),
-    // animación al CREARSE
-    transition('void => visible', [
-        style({ opacity: .8, transform: 'translateX(100%)' }),
-        animate('.5s ease')
-    ]),
-    // animación al CERRAR
-    transition('visible => hidden', [
-        animate('.5s ease')
-    ])
-]);
-const fadeBackdrop = trigger('fadeBackdrop', [
-    state('visible', style({ opacity: 1 })),
-    state('hidden', style({ opacity: 0 })),
-    transition('void => visible', [
-        style({ opacity: 0 }),
-        animate('300ms ease-out')
-    ]),
-    transition('visible => hidden', [
-        animate('300ms ease-in')
-    ])
-]);
-
-const simpleFade = trigger('simpleFade', [
-    transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
-    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
-]);
-
-const base = createValueAccessor();
-class UicSelectComponent extends base {
-    icon = ''; // Icono externo
-    iconColor = 'primary'; //color de ícono externo
-    internalIcon = ''; //Icono interno
-    size = 'm'; // tamaño general del input
-    label = '';
-    error = '';
-    tip = '';
-    disabled = false;
-    nullable = false;
-    options = [];
-    showSubtitle = false;
-    overlayPositions = [
-        {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top'
-        },
-        {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom'
-        }
-    ];
-    open = false;
-    emptyText = '- Seleccionar -';
-    renderer = inject(Renderer2);
-    toggleButton;
-    unlistener;
-    ngOnInit() {
-        this.emptyText = this.disabled ? '-' : '- Seleccionar -';
-    }
-    openList() {
-        if (!this.disabled) {
-            this.open = !this.open;
-            if (this.open) {
-                setTimeout(() => {
-                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
-                        if (!this.toggleButton.nativeElement.contains(e.target)) {
-                            this.open = false;
-                            this.unlistener();
-                        }
-                    });
-                }, 200);
-            }
-        }
-    }
-    selectOption(option) {
-        this.open = false;
-        this.unlistener();
-        this.notifyChange(option);
-    }
-    //( overlay)
-    closeList() {
-        this.open = false;
+class UicTableUicSearcherComponent {
+    placeholder = '';
+    label = 'Buscar';
+    searchOnKeydown = false;
+    filter = new EventEmitter();
+    text = "";
+    reset() {
+        this.text = '';
+        this.filter.emit(this.text);
     }
-    openListOverlay() {
-        if (!this.disabled) {
-            this.open = !this.open;
+    updateText() {
+        if (this.searchOnKeydown) {
+            this.filter.emit(this.text);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSelectComponent, isStandalone: true, selector: "ui-select", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled", nullable: "nullable", options: "options", showSubtitle: "showSubtitle" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => UicSelectComponent),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "toggleButton", first: true, predicate: ["inputwrapp"], descendants: 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\"  [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        <div class=\"fakeinput-wrapp\"  #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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 font-error\">{{error}}</div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [fadeAndRise] });
+    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: 767px){.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: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:var(--primary-600)}\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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: UicSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-select', imports: [CommonModule, OverlayModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => UicSelectComponent),
-                            multi: true
-                        }
-                    ], animations: [fadeAndRise], 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\"  [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        <div class=\"fakeinput-wrapp\"  #inputwrapp cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" > \r\n\r\n            <!-- INPUT -->\r\n            <div  (click)=\"openList()\"   class=\"fakeinput\" [ngClass]=\"{'activeselect':open, 'errorinput':error, 'disabledinput':disabled}\" style=\"cursor: pointer;\">\r\n                @if (internalIcon) {\r\n                    <i class=\"input-internalicon-{{size}} {{internalIcon}}\" ></i>\r\n                }\r\n                <div class=\"fakeinput-content\">{{(value?.text || emptyText)}}</div>\r\n                @if (!disabled) {\r\n                    <i  class=\"ri-arrow-down-s-line\"></i>\r\n                }\r\n            </div>            \r\n            <!-- DESPLEGABLE -->\r\n             @if (open) {\r\n\r\n            <ng-template\r\n                cdkConnectedOverlay\r\n                [cdkConnectedOverlayOrigin]=\"trigger\"\r\n                [cdkConnectedOverlayOpen]=\"open\"\r\n                [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n                (backdropClick)=\"closeList()\"\r\n                [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\r\n                [cdkConnectedOverlayPositions]=\"overlayPositions\"\r\n            >\r\n\r\n                 <div class=\"input-options\" @fadeAndRise >\r\n                     <!-- OPCIONES -->\r\n                     <div class=\"input-option-scroll\">\r\n                        @if (options.length > 0 &&  nullable) {\r\n                            <div (click)=\"selectOption(null)\" class=\"input-option \" style=\"padding: 3px;\" >- Ninguno -</div>\r\n                        }\r\n\r\n                        @for (option of options; track $index) {\r\n                            <div (click)=\"selectOption(option)\"  class=\"input-option\">\r\n                                <div style=\"padding: 2px;\">\r\n                                    <div class=\"f-medium\">{{option.text }}</div>\r\n                                    <div *ngIf=\"showSubtitle\" class=\"f-extralight\">{{option.detail}}</div>\r\n                                </div>\r\n                            </div>\r\n                        }\r\n                         @if (options.length == 0) {\r\n                             <div class=\"fakeinput-alert t-disabled\">No hay elementos para mostrar</div>\r\n                         }\r\n                     </div>\r\n                 </div>\r\n            </ng-template>\r\n            }\r\n\r\n        </div>\r\n        <!-- ALERTS -->\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 font-error\">{{error}}</div>\r\n        }\r\n    </div>\r\n</div>", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], internalIcon: [{
-                type: Input
-            }], size: [{
+            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule], 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: 767px){.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: 767px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{border:none}.searcher .fakeinput:focus-within{border-color:var(--primary-600)}\n"] }]
+        }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], tip: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], nullable: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], showSubtitle: [{
+            }], searchOnKeydown: [{
                 type: Input
-            }], toggleButton: [{
-                type: ViewChild,
-                args: ['inputwrapp']
+            }], filter: [{
+                type: Output
             }] } });
 
-class UicInputComponent {
-    icon = ''; // Icono externo
-    iconColor = 'secondary'; //color de ícono externo
-    internalIcon = ''; //Icono interno
-    size = 'm'; // tamaño general del input
-    // TEXTO
-    label = '';
-    error = '';
-    tip = '';
-    // FUNCTIONS
-    disabled = false;
-    clickButton = new EventEmitter();
-    disableBtn = false;
-    disableButton() {
-        this.clickButton.emit();
-        this.disableBtn = true;
-        setTimeout(() => {
-            this.disableBtn = false;
-        }, 200);
+class UicTablePaginationComponent {
+    currentPage = 1;
+    totalPages = 1;
+    size = 25;
+    loading = false;
+    visiblePages = 3;
+    pagesInView = [];
+    pageChange = new EventEmitter();
+    sizeChange = new EventEmitter();
+    get pages() {
+        const pages = [];
+        const range = Math.floor(this.visiblePages / 2);
+        let start = Math.max(1, this.currentPage - range);
+        let end = Math.min(this.totalPages, this.currentPage + range);
+        if (end === this.totalPages) {
+            start = Math.max(1, this.totalPages - (this.visiblePages - 1));
+        }
+        if (start === 1) {
+            end = Math.min(this.totalPages, this.visiblePages);
+        }
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (end < this.totalPages) {
+            if (end < this.totalPages - 1)
+                pages.push('...');
+            pages.push(this.totalPages);
+        }
+        return pages;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicInputComponent, isStandalone: true, selector: "ui-input", inputs: { icon: "icon", iconColor: "iconColor", internalIcon: "internalIcon", size: "size", label: "label", error: "error", tip: "tip", disabled: "disabled" }, outputs: { clickButton: "clickButton" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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 font-error\">{{error}}</div>\r\n        }\r\n        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    changePage(newPage) {
+        if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
+            this.currentPage = newPage;
+            this.pageChange.emit(this.currentPage);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:40px;height:40px;background-color:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:var(--secondary-500)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\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: "ngmodule", type: FormsModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-input', imports: [CommonModule], template: "<div class=\"input-wrapper\">\r\n    \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        \r\n        @if (label) {\r\n            <div class=\"label  inputlabel\" [class.font-error]=\"error\">\r\n                {{label}} \r\n            </div>\r\n        }\r\n        \r\n        <div class=\"fakeinput\" [ngClass]=\"{'errorinput':error, 'disabledinput':disabled}\">\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                <ng-content class=\"myinput\"></ng-content>\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 font-error\">{{error}}</div>\r\n        }\r\n        \r\n    </div>\r\n</div>\r\n", styles: [":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], iconColor: [{
+            args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" size=\"m\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap:20px;padding:16px 24px}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:40px;height:40px;background-color:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer}.number:hover{background-color:var(--secondary-500)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:13px;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
+        }], propDecorators: { currentPage: [{
                 type: Input
-            }], internalIcon: [{
+            }], totalPages: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], label: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], tip: [{
-                type: Input
-            }], disabled: [{
+            }], loading: [{
                 type: Input
-            }], clickButton: [{
+            }], pageChange: [{
+                type: Output
+            }], sizeChange: [{
                 type: Output
             }] } });
 
-class UicDynamicFormComponent {
-    fields = [];
-    form;
-    flag = false;
-    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: "app-dynamic-form", inputs: { fields: "fields", form: "form" }, ngImport: i0, template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\">\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            />\r\n        </ui-input>\r\n\r\n      }\r\n\r\n      @if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding-bottom:24px}h2{margin-top:24px}.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}\n"], dependencies: [{ 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: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled", "nullable", "options", "showSubtitle"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "disabled"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }] });
+class UicTableListComponent {
+    list = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dynamic-form', imports: [ReactiveFormsModule, UicSelectComponent, UicInputComponent, UicCheckboxComponent, FormsModule], template: "<div class=\"form\"  [formGroup]=\"form\">\r\n  @for (field of fields; track field.name) {\r\n    <div class=\"col-span-{{field.colSpan || 1}}\">\r\n      \r\n      @if ( ['text','number','date'].includes(field.type)  ) {\r\n        <ui-input \r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\">\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            />\r\n        </ui-input>\r\n\r\n      }\r\n\r\n      @if (field.type === 'select') {\r\n        <ui-select\r\n          [error]=\"(form.get(field.name)?.touched && form.get(field.name)?.invalid) ? 'Error': ''\"\r\n          [label]=\"field.label\"\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [options]=\"field.options || []\"\r\n        ></ui-select>\r\n      }\r\n\r\n      @if (field.type === 'checkbox') {\r\n        <ui-checkbox\r\n          [id]=\"field.name\"\r\n          [formControlName]=\"field.name\"\r\n          [placeholder]=\"field.placeholder??''\"\r\n          [label]=\"field.label\"\r\n        ></ui-checkbox>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:stretch;gap:16px;padding-bottom:24px}h2{margin-top:24px}.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}\n"] }]
-        }], propDecorators: { fields: [{
+            args: [{ selector: 'uic-table-list', imports: [], template: "@for (item of list; track $index) {\r\n    <div class=\"list-item\">\r\n        <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n        <div class=\"list-item-data\">\r\n            <div>{{item.text}}</div>\r\n            <p>{{item.subtext}}</p>\r\n        </div> \r\n    </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px;align-items:center}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
+        }], propDecorators: { list: [{
                 type: Input
-            }], form: [{
-                type: Input,
-                args: [{ required: true }]
             }] } });
 
-class UicFormWrapperComponent {
-    schema;
-    loading = false;
-    initialValues = {};
-    useSteps = false;
-    formSubmit = new EventEmitter();
-    fb = inject(FormBuilder);
-    form = this.fb.group({});
-    currentStep = 0;
-    ngOnInit() {
-        this.buildForm();
-        this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
-    }
-    // rebuild form controls when schema changes (revisar)
-    ngOnChanges(changes) {
-        if (changes['schema']) {
-            this.buildForm();
-            this.useSteps = !!this.schema.steps && this.schema.steps.length > 0;
-            if (this.useSteps && this.schema?.steps) {
-                this.currentStep = Math.min(this.currentStep, (this.schema.steps.length - 1) || 0);
-            }
+class UicNameInitsPipe {
+    transform(value) {
+        if (!value) {
+            return "";
         }
-    }
-    handleSubmit() {
-        if (this.form.valid) {
-            this.formSubmit.emit({ result: true, form: this.form.value });
+        const names = value.split(" ");
+        if (names.length > 1) {
+            return names[0].charAt(0) + names[1].charAt(0).toUpperCase();
         }
-        else {
-            this.form.markAllAsTouched();
-            this.formSubmit.emit({ result: false, form: null });
+        else if (names[0].length >= 2) {
+            return names[0].substring(0, 2).toUpperCase();
         }
-    }
-    collectAllFields() {
-        if (!this.schema)
-            return [];
-        if (this.useSteps && this.schema.steps) {
-            return this.schema.steps.flatMap(step => (step.blocks ?? []).flatMap(b => b.fields ?? []));
+        else {
+            return '';
         }
-        // modo sin steps: tomamos blocks del root (si existen)
-        return (this.schema.blocks ?? []).flatMap(b => b.fields ?? []);
-    }
-    buildForm() {
-        const fields = this.collectAllFields();
-        fields.forEach(f => {
-            if (!this.form.contains(f.name)) {
-                const validators = this.mapValidatorsFromField(f);
-                let initial = this.initialValues[f.name] ?? null;
-                if (f.type == 'checkbox' && initial == null)
-                    initial = false;
-                this.form.addControl(f.name, this.fb.control(initial, validators));
-            }
-        });
-        const namesToKeep = new Set(fields.map(f => f.name));
-        Object.keys(this.form.controls).forEach(name => {
-            if (!namesToKeep.has(name)) {
-                this.form.removeControl(name);
-            }
-        });
     }
-    mapValidatorsFromField(f) {
-        const validators = [];
-        if (f.required)
-            validators.push(Validators.required);
-        if (typeof f.min === 'number')
-            validators.push(Validators.min(f.min));
-        if (typeof f.max === 'number')
-            validators.push(Validators.max(f.max));
-        if (f.pattern instanceof RegExp)
-            validators.push(Validators.pattern(f.pattern));
-        return validators;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, isStandalone: true, name: "nameInitials" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicNameInitsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nameInitials'
+                }]
+        }] });
+
+class UicTableUserComponent {
+    user;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:var(--grey-900);font-size:14px}.user-row-data p{color:var(--grey-500);font-weight:400;font-size:12px;line-height:16px}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:12px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{flex:1 1;font-weight:600;color:var(--grey-900);font-size:14px}.user-row-data p{color:var(--grey-500);font-weight:400;font-size:12px;line-height:16px}\n"] }]
+        }], propDecorators: { user: [{
+                type: Input
+            }] } });
+
+class UicTooltipComponent {
+    tooltip = '';
+    left = 0;
+    top = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--white);position:absolute;left:calc(50% - 8px);top:-8px}\n"], animations: [fadeAndRise] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise  class=\"tooltip\" \r\n     [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\r\n</div>", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;margin-top:5px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--white);position:absolute;left:calc(50% - 8px);top:-8px}\n"] }]
+        }] });
+
+class UicToolTipDirective {
+    elementRef;
+    appRef;
+    injector;
+    tip = '';
+    componentRef = null;
+    constructor(elementRef, appRef, injector) {
+        this.elementRef = elementRef;
+        this.appRef = appRef;
+        this.injector = injector;
     }
-    getCurrentBlocks() {
-        if (!this.schema)
-            return [];
-        if (this.useSteps) {
-            const step = this.schema.steps?.[this.currentStep];
-            return step?.blocks ?? [];
+    onMouseEnter() {
+        if (this.componentRef === null && this.tip != '' && this.tip != null) {
+            this.componentRef = createComponent(UicTooltipComponent, {
+                environmentInjector: this.injector
+            });
+            this.appRef.attachView(this.componentRef.hostView);
+            const domElem = this.componentRef.hostView
+                .rootNodes[0];
+            document.body.appendChild(domElem);
+            this.setTooltipComponentProperties();
         }
-        return this.schema.blocks ?? [];
     }
-    nextStep() {
-        const stepsCount = this.schema?.steps?.length ?? 0;
-        if (this.useSteps && this.currentStep < stepsCount - 1) {
-            this.currentStep++;
+    setTooltipComponentProperties() {
+        if (this.componentRef !== null) {
+            this.componentRef.instance.tooltip = this.tip;
+            const { left, right, bottom } = this.elementRef.nativeElement.getBoundingClientRect();
+            this.componentRef.instance.left = (right - left) / 2 + left;
+            this.componentRef.instance.top = bottom;
         }
     }
-    prevStep() {
-        if (this.useSteps && this.currentStep > 0) {
-            this.currentStep--;
+    onMouseLeave() {
+        this.destroy();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        if (this.componentRef !== null) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.componentRef = null;
         }
     }
-    getStepTitle() {
-        return this.schema.steps?.[this.currentStep]?.title ?? '';
-    }
-    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", loading: "loading", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n\r\n      <!-- cuerpo: loader o bloques del step -->\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            <div class=\"block-title\">{{ block.title }}</div>\r\n            <!-- pasamos solo fields y el formGroup -->\r\n            <app-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </app-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      <!-- controles de navegaci\u00F3n -->\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\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          <app-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </app-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "app-dynamic-form", inputs: ["fields", "form"] }, { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: UicToolTipDirective, isStandalone: true, selector: "[tip]", inputs: { tip: "tip" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-form-wrapper', imports: [UicDynamicFormComponent, UicSkeletonLoaderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n\r\n  @if (useSteps) {\r\n    @if (schema.steps?.length) {\r\n\r\n      <div class=\"step-title\">{{ getStepTitle()}}</div>\r\n\r\n      <!-- cuerpo: loader o bloques del step -->\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            <div class=\"block-title\">{{ block.title }}</div>\r\n            <!-- pasamos solo fields y el formGroup -->\r\n            <app-dynamic-form\r\n              [fields]=\"block.fields\"\r\n              [form]=\"form\">\r\n            </app-dynamic-form>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      <!-- controles de navegaci\u00F3n -->\r\n      <div class=\"step-controls\">\r\n        <button type=\"button\" (click)=\"prevStep()\" [disabled]=\"currentStep === 0\">Anterior</button>\r\n\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          <app-dynamic-form\r\n            [fields]=\"block.fields\"\r\n            [form]=\"form\">\r\n          </app-dynamic-form>\r\n        }\r\n      </section>\r\n    }\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:4px 0}.block-title{font-weight:600;margin:24px 0;font-size:24px;line-height:28px;color:#0a0d12}\n"] }]
-        }], propDecorators: { schema: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], initialValues: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicToolTipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tip]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }], propDecorators: { tip: [{
                 type: Input
-            }], formSubmit: [{
-                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
-class UicSearcherComponent {
-    renderer;
-    overlay;
-    positionBuilder;
-    vcr;
-    icon = ''; // Icono externo
-    iconColor = 'secondary'; //color de ícono externo
-    internalIcon = ''; //Icono interno
-    size = 'm'; // tamaño general del input
-    // TEXTO
-    label = '';
-    error = '';
-    tip = '';
-    // FUNCTIONS
-    disabled = false;
-    showSelected = true;
-    placeholder = 'Buscar...';
-    open = false;
-    searchFn;
-    itemDisplayFn = item => String(item);
-    itemIsEnabledFn = () => true;
-    manualSearch = false;
-    selectedItem = null;
-    selectedItemChange = new EventEmitter();
-    isLoading = false;
-    searchText = '';
-    searchSubject = new Subject();
-    results$;
-    toggleButton;
-    unlistener;
-    constructor(renderer, overlay, positionBuilder, vcr) {
-        this.renderer = renderer;
-        this.overlay = overlay;
-        this.positionBuilder = positionBuilder;
-        this.vcr = vcr;
-        this.results$ = this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), tap(() => this.isLoading = true), switchMap(v => {
-            if (v.length < 3) {
-                this.isLoading = false;
-                return of([]);
-            }
-            return this.searchFn(v).pipe(finalize(() => this.isLoading = false));
-        }));
+const highlightRow = trigger('highlightRow', [
+    state('highlighted', style({ backgroundColor: '#efe1f5' })),
+    transition('* => highlighted', [
+        animate('1000ms ease-in', keyframes([
+            style({ backgroundColor: '#ffffff', offset: 0 }),
+            style({ backgroundColor: '#efe1f5', offset: 0.3 }),
+            style({ backgroundColor: '#ffffff', offset: 1.0 }),
+        ]))
+    ])
+]);
+
+const animatedRow = trigger('animatedRow', [
+    transition(':enter', [
+        style({ opacity: 0, transform: 'translateY(-15px)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    transition(':leave', [
+        animate('300ms ease-in', style({ opacity: 0, height: 0, padding: 0, margin: 0 }))
+    ]),
+]);
+
+class UicTableComponent {
+    columns = [];
+    data = [];
+    loading = false;
+    pages = 0;
+    size = 25;
+    highlightedId = 0;
+    headerText = '';
+    totalItems = 0;
+    searchEnabled = true;
+    searchLabel = 'Buscar';
+    searchPlaceholder = 'Buscar';
+    striped = false;
+    showPagination = true;
+    showEmptyMessage = false;
+    emptyMessage = 'No hay elementos';
+    action = new EventEmitter();
+    update = new EventEmitter();
+    checkedChange = new EventEmitter();
+    checkedIds = new Set();
+    sortKey = '';
+    sortAsc = true;
+    filter = '';
+    page = 1;
+    getValue(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.value ?? '-';
     }
-    openList() {
-        if (!this.disabled && !this.open) {
-            this.open = true;
-            this.openOverlay();
-            if (this.open) {
-                setTimeout(() => {
-                    this.unlistener = this.renderer.listen('window', 'click', (e) => {
-                        if (!this.toggleButton.nativeElement.contains(e.target)) {
-                            this.clearSearch();
-                            this.unlistener();
-                        }
-                    });
-                }, 200);
-            }
-        }
+    getFontColor(data, key) {
+        const col = data.find(col => col.key == key);
+        return 'trc-' + (col?.textColor ?? 'black');
     }
-    onSearchChange(value) {
-        this.searchText = value;
-        if (!this.manualSearch) {
-            this.searchSubject.next(value);
-        }
+    getBackgroundColor(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.color ?? 'transparent';
     }
-    triggerSearch() {
-        this.searchSubject.next(this.searchText);
+    isValidRule(data, key) {
+        if (!key)
+            return true;
+        let valid = true;
+        key.forEach(k => {
+            const col = data.find(col => col.key == k);
+            valid = valid && !!(col?.value);
+        });
+        return valid;
     }
-    selectItem(item) {
-        if (this.itemIsEnabledFn(item)) {
-            this.clearSearch();
-            this.selectedItemChange.emit(item);
-            if (this.showSelected)
-                this.selectedItem = item;
-        }
+    getIcon(data, key) {
+        const col = data.find(col => col.key == key);
+        return '<i class="' + col?.icon + '"></i>';
     }
-    clearSearch() {
-        this.searchText = '';
-        this.open = false;
-        this.closeOverlay();
-        this.searchSubject.next('');
+    getList(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.list ?? [];
     }
-    unselect() {
-        this.selectedItem = null;
-        this.selectedItemChange.emit(null);
+    getUser(data, key) {
+        const col = data.find(col => col.key == key);
+        return col?.user;
     }
-    dropdownTemplateRef;
-    overlayRef;
-    closeOverlay() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
+    sortClick(key) {
+        if (this.sortKey != key) {
+            this.sortKey = key;
+            this.sortAsc = true;
+        }
+        else if (this.sortAsc) {
+            this.sortAsc = false;
+        }
+        else {
+            this.sortKey = '';
+            this.sortAsc = true;
         }
+        this.updateData();
     }
-    openOverlay() {
-        if (this.overlayRef)
-            return;
-        const width = this.toggleButton.nativeElement.getBoundingClientRect().width;
-        const positionStrategy = this.positionBuilder
-            .flexibleConnectedTo(this.toggleButton)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-            }
-        ])
-            .withFlexibleDimensions(false)
-            .withPush(false);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'transparent-backdrop'
+    sizeChabge(newSize) {
+        this.size = newSize;
+        this.updateData();
+    }
+    pageChage(newPage) {
+        this.page = newPage;
+        this.updateData();
+    }
+    search(text) {
+        this.filter = text;
+        this.updateData();
+    }
+    updateData() {
+        this.update.emit({
+            sortBy: this.sortKey,
+            isSortAscending: this.sortAsc,
+            pageNumber: this.page,
+            pageSize: this.size,
+            filter: this.filter
         });
-        const templatePortal = new TemplatePortal(this.dropdownTemplateRef, this.vcr);
-        this.overlayRef.attach(templatePortal);
-        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$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 font-error\">{{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:#592371;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:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\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"] }] });
+    toggleSelection(id, checked) {
+        if (checked) {
+            this.checkedIds.add(id);
+        }
+        else {
+            this.checkedIds.delete(id);
+        }
+        this.areAllSelected();
+        this.checkedChange.emit(Array.from(this.checkedIds));
+    }
+    toggleAll(checked) {
+        if (checked) {
+            this.data.forEach(item => this.checkedIds.add(item.id));
+        }
+        else {
+            this.checkedIds.clear();
+        }
+        this.checkedChange.emit(Array.from(this.checkedIds));
+    }
+    areAllSelected() {
+        this.allSelected = this.checkedIds.size === this.data.length;
+    }
+    allSelected = false;
+    ngOnChanges() {
+        this.areAllSelected();
+    }
+    doAction(rowId, key) {
+        this.action.emit({ rowId, key });
+    }
+    resetCheckedIds() {
+        this.checkedIds.clear();
+        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", 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(5); 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            (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(--grey-200);border-radius:12px}table{width:100%;font-weight:400;color:var(--grey-600)}table th{font-size:12px;height:44px;font-weight:500;background-color:var(--grey-50);border-left:solid 6px var(--grey-50)}table th .th-wrap{white-space:nowrap;display:flex;align-items: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;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px var(--grey-200)}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(--grey-200)}.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: ["currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["label", "placeholder", "disabled", "loading"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: UicSearcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, 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 font-error\">{{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:#592371;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:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;border:solid 1px #e9eaeb;border-radius:5px;font-size:13px;z-index:150;overflow:hidden}\n", ":host{width:100%}.input-container{flex:1 1;padding:3px;overflow:hidden}.pad-s{padding:0}.pad-l{padding:5px}.input-options{position:absolute;border-radius:8px;background-color:#fff;box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;left:0;font-size:13px;z-index:50;overflow:hidden}.input-option{line-height:15px;display:flex;align-items:center;padding:7px 15px;border-bottom:solid 1px #efe9f2;-webkit-user-select:none;user-select:none;transition:ease .3s}.input-option-focused{background-color:#592371}.input-option:hover{background-color:#f3eaf9;cursor:pointer}.input-option-scroll{padding:0 3px;max-height:180px;overflow:auto}.input-option-scroll-line{border-bottom:solid 1px #e9eaeb;width:100%;margin-top:2px}.input-option-scroll-focused{background-color:#cfbcd7}.input-option-scroll-btns{border-top:solid 1px #e9eaeb;padding-top:5px;display:flex;justify-content:space-around}.input-option-scroll-btns button{background-color:#fff;border:solid 1px #e9eaeb;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:8px;font-size:26px;height:26px;width:26px}.input-elements{flex-grow:1;display:flex;flex-direction:column;width:100%}.input-internalicon-s{color:#e9eaeb;font-size:17px}.input-internalicon-m{color:#e9eaeb;font-size:20px}.input-internalicon-l{color:#e9eaeb;font-size:24px}.label{font-size:14px;line-height:20px;font-weight:400;color:#0a0d12;margin-bottom:8px}.inputlabel-mini{font-size:12.5px;line-height:15px}.inputlabel-s{font-size:14px}.inputlabel-m{font-size:16px}.inputlabel-l{font-size:17px}.fakeinput{border-radius:8px;overflow:hidden;border:solid 1px #e9eaeb;display:flex;align-items:center;font-size:13px;padding-left:5px;-webkit-user-select:none;user-select:none;background-color:#fff;transition:ease .3s;height:40px}.fakeinput-wrapp{position:relative}.fakeinput-content{margin:0 5px;flex:1 1;padding:9px 0;overflow:hidden;white-space:nowrap}.fakeinput-content 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:#d5d7da}.fakeinput ::ng-deep input:disabled~.fakeinput,.fakeinput ::ng-deep textarea:disabled~.fakeinput{background-color:#e9eaeb;color:#252b37}.fakeinput-button{margin:0;border:none;display:flex;justify-content:center;align-items:center;padding:4px 5px 5px;transition:ease .3s;background-color:#e9eaeb}.fakeinput-button:disabled{background-color:#e9eaeb;color:#f04438}.fakeinput-button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput-button:enabled:active{background-color:#4a1d5e}.fakeinput app-checkbox{width:100%}.fakeinput-alert{font-size:13px;line-height:15px;padding:1px 4px}.fakeinput button{color:#e9eaeb}.fakeinput:focus-within{box-shadow:0 0 3px #63277d}.fakeinput:focus-within button{background-color:#592371;color:#fff}.fakeinput:focus-within button:enabled:hover{cursor:pointer;background-color:#cfbcd7;color:#fff}.fakeinput:focus-within button:enabled:active{background-color:#4f1f64}.fakeinput:hover{border-color:#a4a7ae;cursor:text}.activeselect{border-color:#4f1f64}.inputpadnone{padding:0}.inputpadmini{padding:4px 5px}.inputpad0{padding:5px 10px}.inputpad1{padding:10px 15px}.inputpad2{padding:10px 20px}.errorinput{border-color:#f04438}.t-disabled{color:#d5d7da;padding:5px;text-align:center}.disabledinput{background-color:#fafafa -disabled;color:#252b37}.disabledinput ::ng-deep input{color:#252b37}.editor{border:none;border-radius:8px}.editor ::ng-deep .NgxEditor__MenuBar{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #e9eaeb}.editor ::ng-deep .NgxEditor__Content{min-height:100px}.editor ::ng-deep .NgxEditor{border-top-left-radius:0;border-top-right-radius:0;background-color:transparent;border:none}.editor.onfocus ::ng-deep .NgxEditor__MenuBar{display:none}.editor.onfocus:focus-within ::ng-deep .NgxEditor__MenuBar{display:flex}.fakeinput-files{display:flex;align-items:center;border:dashed #e9eaeb 1px;padding:2px;border-radius:8px}.input-files{display:flex;align-items:center;flex-wrap:wrap;padding:0 10px;width:100%;min-height:30px}.input-file{display:flex;align-items:center;padding:0 5px;font-size:14px;height:30px;overflow:hidden;background-color:#fff;width:fit-content;border-radius:8px;margin:2px;border:solid 1px #f79009;transition:ease .3s}.input-file:hover{cursor:pointer;color:#592371}.input-file i{width:18px;height:18px;font-size:18px;color:#e9eaeb;margin-right:5px}.inputlabel{display:flex;align-items:center}.f-primary{color:#592371}.f{color:#cfbcd7}.f-secondary{color:#752bb0}.f-error{color:#f04438}.f-grey{color:#d5d7da}.font-error{color:#f04438}.tip{color:#592371}.item-disabled{color:#d5d7da}.item-disabled:hover{background-color:#fff;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1$2.Overlay }, { type: i1$2.OverlayPositionBuilder }, { type: i0.ViewContainerRef }], propDecorators: { icon: [{
+            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(5); 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            (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(--grey-200);border-radius:12px}table{width:100%;font-weight:400;color:var(--grey-600)}table th{font-size:12px;height:44px;font-weight:500;background-color:var(--grey-50);border-left:solid 6px var(--grey-50)}table th .th-wrap{white-space:nowrap;display:flex;align-items: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;height:64px}table td,table th{padding:4px 24px;vertical-align:middle;border-bottom:solid 1px var(--grey-200)}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(--grey-200)}.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
-            }], iconColor: [{
+            }], data: [{
                 type: Input
-            }], internalIcon: [{
+            }], loading: [{
+                type: Input
+            }], pages: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], label: [{
+            }], highlightedId: [{
                 type: Input
-            }], error: [{
+            }], headerText: [{
                 type: Input
-            }], tip: [{
+            }], totalItems: [{
                 type: Input
-            }], disabled: [{
+            }], searchEnabled: [{
                 type: Input
-            }], showSelected: [{
+            }], searchLabel: [{
                 type: Input
-            }], placeholder: [{
+            }], searchPlaceholder: [{
                 type: Input
-            }], searchFn: [{
+            }], striped: [{
                 type: Input
-            }], itemDisplayFn: [{
+            }], showPagination: [{
                 type: Input
-            }], itemIsEnabledFn: [{
+            }], showEmptyMessage: [{
                 type: Input
-            }], manualSearch: [{
+            }], emptyMessage: [{
                 type: Input
-            }], selectedItem: [{
+            }], action: [{
+                type: Output
+            }], update: [{
+                type: Output
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+class UicSwichComponent {
+    checked = false;
+    checkedChange = new EventEmitter();
+    disabled = false;
+    placeholder = '';
+    toggle() {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSwichComponent, isStandalone: true, selector: "ui-switch", inputs: { checked: "checked", disabled: "disabled", placeholder: "placeholder" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".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 rgba(var(--secondary-400),.4)}.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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSwichComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-switch', imports: [], template: "<div class=\"toggle-wrapper\" [class.disabled]=\"disabled\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"toggle\"\r\n    [class.checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <span class=\"thumb\"></span>\r\n  </button>\r\n  {{placeholder}}\r\n</div>", styles: [".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 rgba(var(--secondary-400),.4)}.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"] }]
+        }], propDecorators: { checked: [{
                 type: Input
-            }], selectedItemChange: [{
+            }], checkedChange: [{
                 type: Output
-            }], toggleButton: [{
-                type: ViewChild,
-                args: ['inputwrapp']
-            }], dropdownTemplateRef: [{
-                type: ViewChild,
-                args: ['dropdownTemplate']
+            }], disabled: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
             }] } });
 
+const pushTop = trigger('pushTop', [
+    transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
+]);
+
+const sideModal = trigger('sideModal', [
+    state('visible', style({ transform: 'translateX(0)' })),
+    state('hidden', style({ transform: 'translateX(100%)' })),
+    // animación al CREARSE
+    transition('void => visible', [
+        style({ opacity: .8, transform: 'translateX(100%)' }),
+        animate('.5s ease')
+    ]),
+    // animación al CERRAR
+    transition('visible => hidden', [
+        animate('.5s ease')
+    ])
+]);
+const fadeBackdrop = trigger('fadeBackdrop', [
+    state('visible', style({ opacity: 1 })),
+    state('hidden', style({ opacity: 0 })),
+    transition('void => visible', [
+        style({ opacity: 0 }),
+        animate('300ms ease-out')
+    ]),
+    transition('visible => hidden', [
+        animate('300ms ease-in')
+    ])
+]);
+
+const simpleFade = trigger('simpleFade', [
+    transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
+    transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
+]);
+
 const MODAL_DATA = 'MODAL_DATA';
 const MODAL_COMPONENT = 'MODAL_COMPONENT';
 const MODAL_CONFIG = 'MODAL_CONFIG';
@@ -1235,34 +1104,22 @@ class UiModalRef {
     }
 }
 
-class SideModalComponent {
+class UicModalComponent {
     modalRef;
     component;
     congif;
     injector;
-    modal;
-    overlayRef; // lo setea el servicio
-    state = 'visible';
-    show = true;
     myConfig = {};
     ready = false;
     title = '';
     portalOutlet;
-    constructor(modalRef, component, congif, injector, modal) {
+    constructor(modalRef, component, congif, injector) {
         this.modalRef = modalRef;
         this.component = component;
         this.congif = congif;
         this.injector = injector;
-        this.modal = modal;
         this.myConfig = congif;
     }
-    ngOnInit() {
-        if (this.overlayRef) {
-            this.overlayRef.hostElement.addEventListener(MODAL_CLOSE_REQUEST, () => {
-                this.close();
-            });
-        }
-    }
     ngAfterViewInit() {
         const childInjector = Injector.create({
             providers: [
@@ -1276,26 +1133,18 @@ class SideModalComponent {
     }
     closeOuside() {
         if (!this.congif.preventCloseingOutside === true) {
-            this.close();
+            this.modalRef.closeFloating(null);
         }
     }
     close() {
-        this.state = 'hidden';
-    }
-    onAnimationDone(event) {
-        if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
-            this.overlayRef.dispose();
-        }
-    }
-    save() {
-        this.modal.triggerSave();
+        this.modalRef.closeFloating(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SideModalComponent, 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: SideModalComponent, isStandalone: true, selector: "app-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\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;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 #d5d7da}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.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 ɵ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: 767px){.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: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.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: SideModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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:32px;height:32px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:#fff;display:flex;flex-direction:column;padding-top:28px}.sidemodal-header{height:32px;width:100%;padding:0 32px;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 #d5d7da}\n"] }]
+            args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], 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: 767px){.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: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -1305,27 +1154,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_CONFIG]
-                }] }, { type: i0.Injector }, { type: UicModalService }], propDecorators: { portalOutlet: [{
+                }] }, { type: i0.Injector }], propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
 
-class ModalComponent {
+class UicSideModalComponent {
     modalRef;
     component;
     congif;
     injector;
+    modal;
+    overlayRef; // lo setea el servicio
+    state = 'visible';
+    show = true;
     myConfig = {};
     ready = false;
     title = '';
     portalOutlet;
-    constructor(modalRef, component, congif, injector) {
+    constructor(modalRef, component, congif, injector, modal) {
         this.modalRef = modalRef;
         this.component = component;
         this.congif = congif;
         this.injector = injector;
+        this.modal = modal;
         this.myConfig = congif;
     }
+    ngOnInit() {
+        if (this.overlayRef) {
+            this.overlayRef.hostElement.addEventListener(MODAL_CLOSE_REQUEST, () => {
+                this.close();
+            });
+        }
+    }
     ngAfterViewInit() {
         const childInjector = Injector.create({
             providers: [
@@ -1339,18 +1200,26 @@ class ModalComponent {
     }
     closeOuside() {
         if (!this.congif.preventCloseingOutside === true) {
-            this.modalRef.closeFloating(null);
+            this.close();
         }
     }
     close() {
-        this.modalRef.closeFloating(null);
+        this.state = 'hidden';
+    }
+    onAnimationDone(event) {
+        if (event.toState === 'hidden' && event.triggerName === 'sideModal') {
+            this.overlayRef.dispose();
+        }
+    }
+    save() {
+        this.modal.triggerSave();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, 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: ModalComponent, isStandalone: true, selector: "app-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: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:#fff;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:#592371;height:63px;border-bottom:solid 1px #592371}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.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 ɵ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\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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;padding-top:28px}.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: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], 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: 767px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:#fff;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:#592371;height:63px;border-bottom:solid 1px #592371}@media (max-width: 767px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 767px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 767px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 767px){.large{width:95%}}\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\" (@sideModal.done)=\"onAnimationDone($event)\" class=\"sidemodal\" [style.width]=\"myConfig.width??'60%'\" (click)=\"$event.stopPropagation()\">\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    <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;padding-top:28px}.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]
@@ -1360,7 +1229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_CONFIG]
-                }] }, { type: i0.Injector }], propDecorators: { portalOutlet: [{
+                }] }, { type: i0.Injector }, { type: UicModalService }], propDecorators: { portalOutlet: [{
                 type: ViewChild,
                 args: [CdkPortalOutlet, { static: true }]
             }] } });
@@ -1380,11 +1249,11 @@ class UicModalService {
         const modalRef = new UiModalRef(overlayRef, this);
         const injector = this.createModalInjector(overlayRef, modalRef, component, config);
         if (isFloating) {
-            const modalPortal = new ComponentPortal(ModalComponent, null, injector);
+            const modalPortal = new ComponentPortal(UicModalComponent, null, injector);
             overlayRef.attach(modalPortal);
         }
         else {
-            const modalPortal = new ComponentPortal(SideModalComponent, null, injector);
+            const modalPortal = new ComponentPortal(UicSideModalComponent, null, injector);
             const componentRef = overlayRef.attach(modalPortal);
             componentRef.instance.overlayRef = overlayRef;
         }
@@ -1447,11 +1316,11 @@ class TinyAlertComponent {
         this.modalRef.closeFloating(value ? this.response : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "lib-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:#717680}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "lib-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"], dependencies: [{ 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: TinyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:#717680}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:#f04438}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
+            args: [{ selector: 'lib-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath != '') {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }\r\n    <h3>  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"card-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'primary'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:700;line-height:24px;text-align:center;color:var(--grey-500)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 767px){.floating-close{top:0;right:-5px}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -1484,9 +1353,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+let nextId = 1;
+function createSuccessAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'success',
+        duration: 3000,
+        ...options,
+    };
+}
+function createErrorAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'error',
+        duration: 5000,
+        ...options,
+    };
+}
+function createWarningAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'warning',
+        duration: 4000,
+        ...options,
+    };
+}
+function createInfoAlert(message, options) {
+    return {
+        id: nextId++,
+        message,
+        type: 'info',
+        duration: 3000,
+        ...options,
+    };
+}
+
+class UicPushAlertService {
+    autoIncId = 0;
+    alerts$ = new Subject();
+    get stream() {
+        return this.alerts$.asObservable();
+    }
+    show(alertData) {
+        this.autoIncId++;
+        const alert = { ...alertData, id: this.autoIncId };
+        this.alerts$.next(alert);
+    }
+    success(message, options) {
+        this.show(createSuccessAlert(message, options));
+    }
+    error(message, options) {
+        this.show(createErrorAlert(message, options));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPushAlertService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+// COMPONENTS
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AlertContainerComponent, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicButtonComponent, UicCheckboxComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, 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, UicButtonComponent, UicCheckboxComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicNameInitsPipe, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSwichComponent, UicTableComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map