ui-core-abv 0.3.7 → 0.3.9

package/fesm2022/ui-core-abv.mjs

@@ -31,11 +31,11 @@ class UicButtonComponent {
         }
     }
     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    type=\"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 var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.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"] }] });
+    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    type=\"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 var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.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{border-color:var(--primary-400);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{border-color:var(--green-400);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{border-color:var(--yellow-400);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{border-color:var(--blue-500);color:var(--blue-500)}.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{border-color:var(--primary-500);color:var(--red-500)}.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-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.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    type=\"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 var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.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"] }]
+            args: [{ selector: 'ui-button', imports: [CommonModule], template: "<button\r\n    type=\"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 var(--secondary-alpha)}.noicon{padding-left:1rem}.norighticon{padding-right:1rem}.btn-text{font-weight:500}.btn-tiny{height:calc(2.3 * var(--form-ref));min-width:calc(2.3 * var(--form-ref))}.btn-tiny>.btn-text{font-size:.625rem;line-height:calc(2.3 * var(--form-ref))}.btn-tiny i{font-size:.875rem;line-height:calc(2.3 * var(--form-ref));width:calc(2.3 * var(--form-ref))}.btn-tiny .btn-loader{line-height:.625rem;width:.625rem}.btn-small{height:calc(3 * var(--form-ref));min-width:calc(3 * var(--form-ref))}.btn-small>.btn-text{font-size:.75rem;line-height:calc(3 * var(--form-ref))}.btn-small i{font-size:1rem;line-height:calc(3 * var(--form-ref));width:calc(3 * var(--form-ref))}.btn-small .btn-loader{line-height:.75rem;width:.75rem}.btn-medium{height:calc(4 * var(--form-ref));min-width:calc(4 * var(--form-ref))}.btn-medium>.btn-text{font-size:.875rem;line-height:calc(4 * var(--form-ref))}.btn-medium i{font-size:1.625rem;line-height:calc(4 * var(--form-ref));width:calc(4 * var(--form-ref))}.btn-medium .btn-loader{line-height:.875rem;width:.875rem}.btn-large{height:calc(4.6 * var(--form-ref));min-width:calc(4.6 * var(--form-ref))}.btn-large>.btn-text{font-size:1rem;line-height:calc(4.6 * var(--form-ref))}.btn-large i{font-size:1.625rem;line-height:calc(4.6 * var(--form-ref));width:calc(4.6 * var(--form-ref))}.btn-large .btn-loader{line-height:1rem;width:1rem}.btn-gigant{height:calc(5.4 * var(--form-ref));min-width:calc(5.4 * var(--form-ref))}.btn-gigant>.btn-text{font-size:1.125rem;line-height:calc(5.4 * var(--form-ref))}.btn-gigant i{font-size:1.625rem;line-height:calc(5.4 * var(--form-ref));width:calc(5.4 * var(--form-ref))}.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{border-color:var(--primary-400);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{border-color:var(--green-400);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{border-color:var(--yellow-400);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{border-color:var(--blue-500);color:var(--blue-500)}.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{border-color:var(--primary-500);color:var(--red-500)}.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-grey-filled{background-color:var(--grey-400)}.btn-grey-filled:hover{background-color:var(--grey-600)}.btn-grey-filled:active{background-color:var(--grey-900)}.btn-grey-filled:disabled{background-color:var(--grey-100)}.btn-grey-bordered{border-color:var(--grey-500);color:var(--grey-500)}.btn-grey-bordered:hover{background-color:var(--grey-100)}.btn-grey-bordered:active{background-color:var(--grey-300)}.btn-grey-bordered:disabled{background-color:var(--grey-100)}.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: [{
@@ -3468,11 +3468,11 @@ class UicTableUicSearcherComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n    <div style=\"width: 300px;\">\r\n        <ui-input internalIcon=\"ri-search-line\">\r\n            <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n        </ui-input>\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.ui-table-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: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n    <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </ui-input>\r\n    @if (showSearchButton) {\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-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: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n    <div style=\"width: 300px;\">\r\n        <ui-input internalIcon=\"ri-search-line\">\r\n            <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n        </ui-input>\r\n    </div>\r\n    @if (showSearchButton) {\r\n        <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.ui-table-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: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
+            args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n    <ui-input [internalIcon]=\"!showSearchButton?'ri-search-line':''\">\r\n        <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n    </ui-input>\r\n    @if (showSearchButton) {\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"showSearchButton ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n    }\r\n    <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:5px;align-items:center}.ui-table-searcher ui-input{min-width:300px;flex:1 1}@media (max-width: 479px){.ui-table-searcher ui-input{min-width:5px}}.ui-table-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: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
@@ -3494,6 +3494,8 @@ class UicTablePaginationComponent {
     size = 25;
     loading = false;
     showText = true;
+    nextButtonText = 'Sig.';
+    previousButtonText = 'Ant.';
     visiblePages = 3;
     pagesInView = [];
     pageChange = new EventEmitter();
@@ -3532,11 +3534,11 @@ class UicTablePaginationComponent {
         }
     }
     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: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Anterior':''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </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    </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Siguiente':''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.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:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.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:.75rem;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 }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?previousButtonText:''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </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    </div>\r\n    <div class=\"current-mobile\"> {{currentPage}} </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?nextButtonText:''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}@media (max-width: 479px){.table-numbers{display:none}}.current-mobile{font-size:14px;display:none}@media (max-width: 479px){.current-mobile{display:block}}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.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:.75rem;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: UicTablePaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Anterior':''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </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    </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?'Siguiente':''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.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:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.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:.75rem;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"] }]
+            args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == 1\" \r\n        (click)=\"changePage(currentPage - 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?previousButtonText:''\"\r\n        [iconOnly]=\"!showText\" \r\n        icon=\"ri-arrow-left-line\" > \r\n    </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    </div>\r\n    <div class=\"current-mobile\"> {{currentPage}} </div>\r\n    <ui-button \r\n        [disabled]=\"loading || currentPage == totalPages\" \r\n        (click)=\"changePage(currentPage + 1)\" \r\n        [size]=\"buttonSize\" \r\n        color=\"black\" \r\n        type=\"bordered\" \r\n        [text]=\"showText?nextButtonText:''\"\r\n        [iconOnly]=\"!showText\" \r\n        rightIcon=\"ri-arrow-right-line\" > \r\n    </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}@media (max-width: 479px){.table-numbers{display:none}}.current-mobile{font-size:14px;display:none}@media (max-width: 479px){.current-mobile{display:block}}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.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:.75rem;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: { buttonSize: [{
                 type: Input
             }], currentPage: [{
@@ -3549,6 +3551,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], showText: [{
                 type: Input
+            }], nextButtonText: [{
+                type: Input
+            }], previousButtonText: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], sizeChange: [{
@@ -3629,16 +3635,19 @@ const animatedRow = trigger('animatedRow', [
 class UicStatusLabelComponent {
     color = 'grey';
     type = 'status';
+    icon = 'ri-circle-fill';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i class=\"ri-circle-fill\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);background-color:var(--red-50)}.slc-blue{color:var(--blue-500);background-color:var(--blue-50)}.slc-green{color:var(--green-500);background-color:var(--green-50)}.slc-yellow{color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color", type: "type", icon: "icon" }, ngImport: i0, template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i class=\"ri-circle-fill\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);background-color:var(--red-50)}.slc-blue{color:var(--blue-500);background-color:var(--blue-50)}.slc-green{color:var(--green-500);background-color:var(--green-50)}.slc-yellow{color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
+            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label sl-' + type + ' ' + (type == 'status' ? 'slc-' : 'slt-') + color\" >\r\n    @if (type == 'status') {\r\n        <i [class]=\"icon\"></i>\r\n    }\r\n    <div class=\"sl-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;white-space:nowrap;padding:0 8px;width:fit-content;border:solid 1px var(--grey-300);font-size:12px;line-height:18px;font-weight:500}.status-label i{font-size:10px;margin-right:6px}.slc-primary{color:var(--primary-500);border-color:var(--primary-500);background-color:var(--primary-50)}.slc-red{color:var(--red-500);border-color:var(--red-500);background-color:var(--red-50)}.slc-blue{border-color:var(--blue-600);color:var(--blue-600);background-color:var(--blue-100)}.slc-green{border-color:var(--green-500);color:var(--green-500);background-color:var(--green-50)}.slc-yellow{border-color:var(--yellow-500);color:var(--yellow-500);background-color:var(--yellow-50)}.slc-black{border-color:var(--grey-900);color:var(--grey-900);background-color:var(--grey-50)}.slc-grey{border-color:var(--grey-300);color:var(--grey-300);background-color:var(--grey-50)}.sl-text{color:var(--grey-600)}.sl-tag{border:none}.sl-tag .sl-text{color:var(--white)}.slt-primary{background-color:var(--primary-600)}.slt-red{background-color:var(--red-600)}.slt-blue{background-color:var(--blue-600)}.slt-green{background-color:var(--green-600)}.slt-yellow{background-color:var(--yellow-600)}.slt-black,.slt-grey{background-color:var(--grey-600)}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], type: [{
                 type: Input
+            }], icon: [{
+                type: Input
             }] } });
 
 class UicActionButtonComponent {
@@ -3748,6 +3757,8 @@ class UicTableComponent {
     data = [];
     loading = false;
     disabled = false;
+    rowClickable = false;
+    rowExpandible = false;
     pages = 0;
     size = 25;
     squeletonRows = 5;
@@ -3768,17 +3779,21 @@ class UicTableComponent {
     showSearchButton = false;
     showTextPagination = true;
     emptyMessage = 'No hay elementos';
+    nextButtonText = 'Sig.';
+    previousButtonText = 'Ant.';
     searcherShowButtonText = false;
     action = new EventEmitter();
     update = new EventEmitter();
     checkedChange = new EventEmitter();
     switchChange = new EventEmitter();
+    clickedRow = new EventEmitter();
     allSelected = false;
     checkedIds = new Set();
     sortKey = '';
     sortAsc = true;
     filter = '';
     page = 1;
+    fullViewRows = [];
     getValue(data, key) {
         const col = data.find(col => col.key == key);
         return col?.value?.toString() ?? '';
@@ -3814,14 +3829,15 @@ class UicTableComponent {
         });
         return valid;
     }
-    getIcon(data, key) {
+    getIcon(data, key, right = false) {
         const col = data.find(col => col.key == key);
-        if (col && col.icon) {
-            return col.icon + ' ui-trc-' + (col?.iconColor ?? 'black');
+        if (col && right && col.rightIcon) {
+            return col.rightIcon + ' ui-trc-' + (col?.iconColor ?? 'black');
         }
-        else {
-            return null;
+        if (col && !right && col.icon) {
+            return col.icon + ' ui-trc-' + (col?.iconColor ?? 'black');
         }
+        return null;
     }
     getList(data, key) {
         const col = data.find(col => col.key == key);
@@ -3891,7 +3907,8 @@ class UicTableComponent {
     ngOnChanges(change) {
         this.areAllSelected();
     }
-    doAction(rowId, key) {
+    doAction(rowId, key, event) {
+        event?.stopPropagation();
         this.action.emit({ rowId, key });
     }
     resetCheckedIds() {
@@ -3901,13 +3918,29 @@ class UicTableComponent {
     switchHandler(key, value, columName) {
         this.switchChange.emit({ key, value, columName });
     }
+    expand(rowRef, event) {
+        rowRef.expanded = !rowRef.expanded;
+        event?.stopPropagation();
+    }
     actionsRef;
     hasActions = false;
     ngAfterContentInit() {
         this.hasActions = !!this.actionsRef;
     }
+    clickRow(id) {
+        if (this.rowClickable)
+            this.clickedRow.emit(id);
+        if (this.rowExpandible) {
+            if (this.fullViewRows.includes(id)) {
+                this.fullViewRows = this.fullViewRows.filter(f => f != id);
+            }
+            else {
+                this.fullViewRows.push(id);
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-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                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\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 [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                    @let subtext = getSubtext(row.data,header.key);\r\n                                    @if( subtext  ){\r\n                                        <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", rowClickable: "rowClickable", rowExpandible: "rowExpandible", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", nextButtonText: "nextButtonText", previousButtonText: "previousButtonText", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange", clickedRow: "clickedRow" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text' || !header.type) {\r\n                                            @let icon = getIcon(row.data,header.key); \r\n                                            @let rightIcon = getIcon(row.data,header.key,true);\r\n                                            @if( icon ){ <i [class]=\"icon\"></i>}\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                            @if( rightIcon ){ <i [class]=\"rightIcon\"></i>}\r\n                                        }\r\n                                        @if (header.type == 'bigtext') {\r\n                                            @let btext = getValue(row.data,header.key);\r\n                                            <div (click)=\"expand(row, $event)\" class=\"expandible-row\" [class.expandedrow]=\"row.expanded\">\r\n                                                {{ btext  }} \r\n                                                @if(btext.length > 10){\r\n                                                    <i [class]=\"row.expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n                                                }\r\n                                                @if (!row.expanded && btext.length > 10) {\r\n                                                    <div class=\"fade-overlay\"></div>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\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 [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label  [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'tag'){\r\n                                            <ui-status-label  type=\"tag\" [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div (click)=\"$event.stopPropagation()\">\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                    @let subtext = getSubtext(row.data,header.key);\r\n                                    @if( subtext  ){\r\n                                        <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText", "nextButtonText", "previousButtonText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
             type: Component,
@@ -3915,7 +3948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
                         UicTableUicSearcherComponent, UicStatusLabelComponent,
                         UicSwichComponent,
-                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.ui-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                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text') {\r\n                                            @if( getIcon(row.data,header.key) ){\r\n                                                <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n                                            }\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\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 [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div>\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                    @let subtext = getSubtext(row.data,header.key);\r\n                                    @if( subtext  ){\r\n                                        <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"] }]
+                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n    <div class=\"ui-table-filters\">\r\n        @if (searchEnabled) {\r\n            <uic-table-searcher \r\n                [showSearchButton]=\"showSearchButton\" \r\n                [showButtonText]=\"searcherShowButtonText\" \r\n                [searchOnKeydown]=\"searchOnKeydown\"\r\n                (filter)=\"search($event)\" \r\n                [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n        }\r\n        <div class=\"ui-filter-actions\">\r\n            <ng-content select=\"[actions]\"></ng-content>\r\n        </div>\r\n    </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"ui-table-container\">    \r\n        <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n            <thead>\r\n                <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n                    @for (header of columns; track $index) {\r\n                        <th [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                            [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                            <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n                                @if (header.type=='checkbox') {\r\n                                    <div>\r\n                                        <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n                                    </div>\r\n                                }\r\n                                {{header.label.toUpperCase() }} \r\n                                @if (header.sortEnable) {\r\n                                    <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr>\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"ui-row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  \r\n                            [class.ui-tr-highlighted]=\"row.highlighted\"\r\n                            [class.clickable-row]=\"rowClickable\"\r\n                            (click)=\"clickRow(row.id)\"\r\n                            >\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\"\r\n                                    [class.noshow-small]=\"header.hideOn == 'small'\"\r\n                                    [class.noshow-medium]=\"header.hideOn == 'medium'\">\r\n                                    <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n                                        [style.justify-content]=\"header.align||null\"\r\n                                        [style.width.px]=\"header.width || null\">\r\n                                        @if (header.type == 'text' || !header.type) {\r\n                                            @let icon = getIcon(row.data,header.key); \r\n                                            @let rightIcon = getIcon(row.data,header.key,true);\r\n                                            @if( icon ){ <i [class]=\"icon\"></i>}\r\n                                            {{  getValue(row.data,header.key) }} \r\n                                            @if( rightIcon ){ <i [class]=\"rightIcon\"></i>}\r\n                                        }\r\n                                        @if (header.type == 'bigtext') {\r\n                                            @let btext = getValue(row.data,header.key);\r\n                                            <div (click)=\"expand(row, $event)\" class=\"expandible-row\" [class.expandedrow]=\"row.expanded\">\r\n                                                {{ btext  }} \r\n                                                @if(btext.length > 10){\r\n                                                    <i [class]=\"row.expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n                                                }\r\n                                                @if (!row.expanded && btext.length > 10) {\r\n                                                    <div class=\"fade-overlay\"></div>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                        @if (header.type == 'icon-list') {\r\n                                            @for (alert of getList(row.data,header.key); track $index) {\r\n                                                <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n                                            }\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 [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox>                \r\n                                        }\r\n                                        @else if (header.type == 'status'){\r\n                                            <ui-status-label  [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'tag'){\r\n                                            <ui-status-label  type=\"tag\" [icon]=\"getIcon(row.data,header.key)??'ri-circle-fill'\" [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label>                \r\n                                        }\r\n                                        @else if (header.type == 'switch'){\r\n                                            <div (click)=\"$event.stopPropagation()\">\r\n                                                <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch>    \r\n                                            </div>\r\n                                        }\r\n                                        @else if (header.type == 'actions') {         \r\n                                            <div class=\"ui-centered-cell-content\">\r\n                                                @for (btn of header.actions; track $index) {\r\n                                                    @if (isValidRule(row.data,btn.rule)) {\r\n                                                        <ui-button \r\n                                                            [disabled]=\"loading\"\r\n                                                            [tip]=\"btn.tooltip??''\"\r\n                                                            size=\"s\"\r\n                                                            [disabled]=\"disabled\"\r\n                                                            [text]=\"btn.text??''\"\r\n                                                            [type]=\"btn.type??'filled'\"\r\n                                                            [iconOnly]=\"!btn.text\"\r\n                                                            [icon]=\"btn.icon??''\"\r\n                                                            [color]=\"btn.color??'black'\"\r\n                                                            (click)=\"doAction(row.id,btn.key,$event)\">\r\n                                                        </ui-button> \r\n                                                    }\r\n                                                } \r\n                                                @if ( header.moreActions && header.moreActions.length>0  ) {\r\n                                                    @for (ma of header.moreActions; track $index) {\r\n                                                        <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\"  [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n                                                    }\r\n                                                }\r\n                                            </div>               \r\n                                        }\r\n                                    </div>\r\n                                    @let subtext = getSubtext(row.data,header.key);\r\n                                    @if( subtext  ){\r\n                                        <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n                                    }\r\n                                </td>\r\n                            }\r\n                        </tr>\r\n                        @if (fullViewRows.includes(row.id)) {\r\n                            <tr style=\"border-top: none ;\">\r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"full-space-row\">\r\n                                    </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                    @empty {\r\n                        @if (showEmptyMessage) {\r\n                            <tr> \r\n                                <td [colSpan]=\"columns.length\">\r\n                                    <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [showText]=\"showTextPagination\"\r\n            [size]=\"size\"\r\n            [nextButtonText]=\"nextButtonText\"\r\n            [previousButtonText]=\"previousButtonText\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table tbody tr{border-top:solid 1px var(--table-border-color)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{padding:5px 0;display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}@media (max-width: 479px){.ui-table-filters{padding:8px 0;flex-direction:column;gap:8px}}.ui-filter-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.clickable-row{cursor:pointer}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}.full-space-row{width:100%;padding:20px;text-align:center}@media (max-width: 479px){.noshow-small{display:none}}@media (min-width: 480px) and (max-width: 767px){.noshow-medium{display:none}}@media (max-width: 479px){.noshow-medium{display:none}}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -3924,6 +3957,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], rowClickable: [{
+                type: Input
+            }], rowExpandible: [{
+                type: Input
             }], pages: [{
                 type: Input
             }], size: [{
@@ -3964,6 +4001,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], emptyMessage: [{
                 type: Input
+            }], nextButtonText: [{
+                type: Input
+            }], previousButtonText: [{
+                type: Input
             }], searcherShowButtonText: [{
                 type: Input
             }], action: [{
@@ -3974,6 +4015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], switchChange: [{
                 type: Output
+            }], clickedRow: [{
+                type: Output
             }], actionsRef: [{
                 type: ContentChild,
                 args: ['[actions]']
@@ -4177,7 +4220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class UicKpiCardComponent {
     data;
-    loading = true;
+    loading = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicKpiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicKpiCardComponent, isStandalone: true, selector: "ui-kpi-card", inputs: { data: "data", loading: "loading" }, ngImport: i0, template: "@if (data) {\r\n    <div class=\"kpi-card\">\r\n        <div >\r\n            <div class=\"kpi-card-label\">{{data.label}}</div>\r\n            @if (loading) {\r\n                <div class=\"kpi-card-value-loading\"></div>\r\n            }@else {\r\n\r\n                <div [class]=\"'kpi-card-value ui-trc-' + data.textColor\">{{data.value}}</div>\r\n            }\r\n        </div>\r\n        <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>\r\n    </div>\r\n}", styles: [".kpi-card{border:solid 1px var(--table-border-color);background-color:#fff;padding:20px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;font-size:2rem;gap:20px}.kpi-card-label{font-size:.9rem;line-height:1.2rem;color:var(--grey-500)}.kpi-card-value{font-size:1.6rem;font-weight:500;display:flex;padding-top:5px}.kpi-card-value-loading{height:1.6rem;border-radius:5px;animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);background-size:200% 100%}.ui-trc-primary{color:var(--primary-600)}.ui-trc-red{color:var(--red-600)}.ui-trc-blue{color:var(--blue-600)}.ui-trc-green{color:var(--green-600)}.ui-trc-yellow{color:var(--yellow-600)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-400)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] });
 }
@@ -4191,13 +4234,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             }] } });
 
 class UicPortletCardComponent {
-    title = 'El título de la sección';
+    title = '';
     data = [];
-    /** Layout mode: horizontal keeps label/value in a row; vertical stacks label over value. */
     layout = 'horizontal';
-    /** Columns for vertical grid layout. */
     cols = 1;
     gap = 20;
+    labelWeight = 400;
+    valueWeight = 500;
     get gridTemplateColumns() {
         if (this.layout !== 'vertical') {
             return null;
@@ -4215,7 +4258,7 @@ class UicPortletCardComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap" }, ngImport: i0, template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of data; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\">{{item.label}}</div>\r\n            <div class=\"portlet-row-value\">\r\n                @if (item.icon) {\r\n                    <i [class]=\"item.icon\"></i>\r\n                }\r\n                @if (['text','copy'].includes(item.type)) {\r\n                    <div class=\"p-type-text\">\r\n                        <div class=\"content-texttype\">\r\n                            {{item.value}} \r\n\r\n                            @if (item.type == 'copy'){\r\n                                <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n                            }\r\n\r\n                        </div>\r\n                        <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n                    </div>\r\n                }\r\n                @if (item.type == 'money') {\r\n                    {{ +item.value | currency: item.currencyCode}} \r\n                }\r\n                \r\n                @if (item.type == 'date') {\r\n                    {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n                }\r\n                @if (item.type == 'status' || item.type == 'tag') {\r\n                    <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap", labelWeight: "labelWeight", valueWeight: "valueWeight" }, ngImport: i0, template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of data; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n                @if (item.icon) {\r\n                    <i [class]=\"item.icon\"></i>\r\n                }\r\n                @if (['text','copy'].includes((item.type??'text'))) {\r\n                    <div class=\"p-type-text\">\r\n                        <div class=\"content-texttype\">\r\n                            {{item.value}} \r\n\r\n                            @if (item.type == 'copy'){\r\n                                <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n                            }\r\n\r\n                        </div>\r\n                        <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n                    </div>\r\n                }\r\n                @if (item.type == 'money') {\r\n                    {{ +item.value | currency: item.currencyCode}} \r\n                }\r\n                \r\n                @if (item.type == 'date') {\r\n                    {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n                }\r\n                @if (item.type == 'status' || item.type == 'tag') {\r\n                    <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
             type: Component,
@@ -4224,7 +4267,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CurrencyPipe,
                         UicButtonComponent,
                         DatePipe
-                    ], template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of data; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\">{{item.label}}</div>\r\n            <div class=\"portlet-row-value\">\r\n                @if (item.icon) {\r\n                    <i [class]=\"item.icon\"></i>\r\n                }\r\n                @if (['text','copy'].includes(item.type)) {\r\n                    <div class=\"p-type-text\">\r\n                        <div class=\"content-texttype\">\r\n                            {{item.value}} \r\n\r\n                            @if (item.type == 'copy'){\r\n                                <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n                            }\r\n\r\n                        </div>\r\n                        <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n                    </div>\r\n                }\r\n                @if (item.type == 'money') {\r\n                    {{ +item.value | currency: item.currencyCode}} \r\n                }\r\n                \r\n                @if (item.type == 'date') {\r\n                    {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n                }\r\n                @if (item.type == 'status' || item.type == 'tag') {\r\n                    <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
+                    ], template: "@if ( title) {\r\n    <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n    [class.portlet-vertical]=\"layout === 'vertical'\" \r\n    [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n    [style]=\"'gap: ' + gap + 'px;'\" >\r\n    @for (item of data; track $index) {\r\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n            <div class=\"portlet-row-label\" [style.fontWeight]=\"labelWeight\">{{item.label}}</div>\r\n            <div class=\"portlet-row-value\" [style.fontWeight]=\"valueWeight\">\r\n                @if (item.icon) {\r\n                    <i [class]=\"item.icon\"></i>\r\n                }\r\n                @if (['text','copy'].includes((item.type??'text'))) {\r\n                    <div class=\"p-type-text\">\r\n                        <div class=\"content-texttype\">\r\n                            {{item.value}} \r\n\r\n                            @if (item.type == 'copy'){\r\n                                <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n                            }\r\n\r\n                        </div>\r\n                        <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n                    </div>\r\n                }\r\n                @if (item.type == 'money') {\r\n                    {{ +item.value | currency: item.currencyCode}} \r\n                }\r\n                \r\n                @if (item.type == 'date') {\r\n                    {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n                }\r\n                @if (item.type == 'status' || item.type == 'tag') {\r\n                    <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n                }\r\n            </div>\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".portlet{display:flex;flex-direction:column}.portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{color:var(--grey-400)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], data: [{
@@ -4235,6 +4278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], gap: [{
                 type: Input
+            }], labelWeight: [{
+                type: Input
+            }], valueWeight: [{
+                type: Input
             }] } });
 
 class UicTabsButtonComponent {
@@ -4246,11 +4293,11 @@ class UicTabsButtonComponent {
         this.activeTabChange.emit(this.activeTab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            <i [class]=\"tab.icon\"></i> {{tab}}</div>\r\n    }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTabsButtonComponent, isStandalone: true, selector: "ui-tabs-button", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange" }, ngImport: i0, template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTabsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            <i [class]=\"tab.icon\"></i> {{tab}}</div>\r\n    }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] }]
+            args: [{ selector: 'ui-tabs-button', imports: [], template: "<div class=\"tabs\">\r\n    @for (tab of tabs; track $index) {\r\n        <div (click)=\"selectTab(tab.key)\" [class.active-tab]=\"tab.key == activeTab\" class=\"tab\"> \r\n            @if (tab.icon) {\r\n                <i [class]=\"tab.icon\"></i> \r\n            }\r\n            {{tab.text}}</div>\r\n    }\r\n</div>", styles: [".tabs{background-color:var(--grey-100);display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:5px;border-radius:10px}.tab{font-size:.9rem;cursor:pointer;display:flex;gap:15px;justify-content:center;font-weight:400;padding:5px 25px;border-radius:10px;background-color:var(--grey-100);transition:ease .3s}.tab:hover{background-color:#ffffffd7}.active-tab{background-color:#fff}\n"] }]
         }], propDecorators: { tabs: [{
                 type: Input
             }], activeTab: [{
@@ -4277,9 +4324,10 @@ class UicWorkPanelComponent {
     tabSelected = new EventEmitter();
     tabAdded = new EventEmitter();
     addTabRequest = new EventEmitter();
+    fullViewChange = new EventEmitter();
     minPosition = 1;
     showAddButton = true;
-    fullView = true;
+    fullView = false;
     isMinimized = false;
     activeTabId;
     tabInstances = [];
@@ -4307,6 +4355,10 @@ class UicWorkPanelComponent {
             }, false);
         }
     }
+    changeSizeBtn(b) {
+        this.fullView = b;
+        this.fullViewChange.emit(this.isFullViewActivated());
+    }
     addTab(tabConfig) {
         // Si el host aun no esta listo, guardamos la definicion para crearla luego.
         if (!this.initialized || !this.host) {
@@ -4358,6 +4410,7 @@ class UicWorkPanelComponent {
         this.renderActiveTab();
         this.emitTabsChange();
         this.tabClosed.emit(id);
+        this.fullViewChange.emit(this.isFullViewActivated());
     }
     close() {
         if (this.activeTabId) {
@@ -4367,6 +4420,7 @@ class UicWorkPanelComponent {
     minimizePanel() {
         this.isMinimized = true;
         this.activeTabId = '';
+        this.fullViewChange.emit(this.isFullViewActivated());
     }
     createTab(tabConfig, emitChange = true) {
         if (!this.host) {
@@ -4396,18 +4450,22 @@ class UicWorkPanelComponent {
         const active = this.tabInstances.find(tab => tab.id === this.activeTabId);
         if (active) {
             this.host.insert(active.componentRef.hostView);
+            this.fullViewChange.emit(this.isFullViewActivated());
         }
     }
     emitTabsChange() {
         const snapshot = this.tabInstances.map(({ componentRef, ...tab }) => ({ ...tab }));
         this.tabsChange.emit(snapshot);
     }
+    isFullViewActivated() {
+        return !(this.isMinimized || !this.activeTabId) && this.fullView;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button (click)=\"fullView = false\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button (click)=\"fullView = true\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:0;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:fit-content;position:fixed;bottom:0;right:0;z-index:100;padding:4px 8px 4px 20px;display:flex;gap:8px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;border:solid 1px var(--grey-300);border-radius:9px;color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:2000}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button (click)=\"fullView = false\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button (click)=\"fullView = true\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:0;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:fit-content;position:fixed;bottom:0;right:0;z-index:100;padding:4px 8px 4px 20px;display:flex;gap:8px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;border:solid 1px var(--grey-300);border-radius:9px;color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:2000}}\n"] }]
+            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n  <div class=\"panel-header\">\r\n    <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n    @if (fullView) {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n    } @else {\r\n      <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n    }\r\n    <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n  </div>\r\n  <div class=\"panel-overflow\">\r\n    <!-- contenido dinamico -->\r\n    <ng-container #host></ng-container>\r\n  </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n  <div class=\"panel-nav-bar\">\r\n    <div class=\"panel-tabs\">\r\n      @for (tab of tabInstances; track tab.id) {\r\n        <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n          <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n            <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n            <div class=\"min-text\">{{ tab.label }}</div>\r\n          </button>\r\n          <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:80vh;bottom:32px;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;flex:1 1;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
                 type: ViewChild,
                 args: ['host', { read: ViewContainerRef, static: true }]
@@ -4427,6 +4485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], addTabRequest: [{
                 type: Output
+            }], fullViewChange: [{
+                type: Output
             }], minPosition: [{
                 type: Input
             }], showAddButton: [{
@@ -4615,7 +4675,6 @@ class UicSideModalComponent {
     show = true;
     myConfig = {};
     ready = false;
-    title = '';
     portalOutlet;
     constructor(modalRef, component, congif, injector, modal) {
         this.modalRef = modalRef;
@@ -4668,11 +4727,11 @@ class UicSideModalComponent {
         this.modal.triggerSave();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <div class=\"modal-header\">\r\n            <div class=\"modal-header-title\">\r\n                <div class=\"f-title\">{{myConfig.title}}</div>\r\n                <div class=\"f-subtitle\">{{myConfig.subtitle}}</div>\r\n            </div>\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>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\" >\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.modal-header{width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-100);padding:5px}.modal-header-title{font-size:20px;font-weight:600;padding-left:20px}@media (max-width: 479px){.modal-header{right:10px;top:10px}}.f-subtitle{font-weight:400;font-size:16px;color:var(--grey-500)}.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}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:25px}@media (max-width: 479px){.sidemodal-body{padding:10px}}.sidemodal-footer{height:calc(7 * var(--design-size-ref));padding:0 calc(2 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"] }]
+            args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div  [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\">   \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n    (@sideModal.done)=\"onAnimationDone($event)\" \r\n    class=\"sidemodal\" \r\n    [style.width]=\"myConfig.width??'60%'\" \r\n    (click)=\"$event.stopPropagation()\">\r\n    @if (myConfig.headerEnabled) {\r\n        <div class=\"modal-header\">\r\n            <div class=\"modal-header-title\">\r\n                <div class=\"f-title\">{{myConfig.title}}</div>\r\n                <div class=\"f-subtitle\">{{myConfig.subtitle}}</div>\r\n            </div>\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>\r\n    }\r\n    <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\" >\r\n        <ng-template cdkPortalOutlet></ng-template>\r\n    </div>\r\n    @if (myConfig.footerEnabled) {\r\n        <div class=\"sidemodal-footer\">\r\n            @if (myConfig.showCancelButton) {\r\n                <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n            }\r\n            <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n        </div>\r\n    }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.modal-header{width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-100);padding:5px}.modal-header-title{font-size:20px;font-weight:600;padding-left:20px}@media (max-width: 479px){.modal-header{right:10px;top:10px}}.f-subtitle{font-weight:400;font-size:16px;color:var(--grey-500)}.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}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:25px}@media (max-width: 479px){.sidemodal-body{padding:10px}}.sidemodal-footer{height:calc(7 * var(--design-size-ref));padding:0 calc(2 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -4769,11 +4828,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: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'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}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'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}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
+            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'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}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]