ui-core-abv 0.2.4 → 0.2.7

package/fesm2022/ui-core-abv.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, InjectionToken, TemplateRef, ContentChild, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
 import * as i2 from '@angular/forms';
@@ -2476,6 +2476,7 @@ class UicFormWrapperComponent {
     loading = false;
     disabled = false;
     showButtons = false;
+    fillSelects = false;
     initialValues = {};
     formSubmit = new EventEmitter();
     formChange = new EventEmitter();
@@ -2505,9 +2506,11 @@ class UicFormWrapperComponent {
             const validators = this.mapValidatorsFromField(f);
             let initial = this.initialValues[f.name] ?? null;
             if ((f.type === 'checkbox' || f.type === 'switch') && initial == null)
-                initial = false;
+                initial = false; // 
             if (f.type === 'slider' && initial == null)
                 initial = f.min ?? 0;
+            if (this.fillSelects && f.type === 'select' && initial == null && f.options && f.options.length > 0)
+                initial = f.options[0].id;
             const controlState = {
                 value: initial,
                 disabled: !!f.disabled
@@ -2762,7 +2765,7 @@ class UicFormWrapperComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">Limpiar</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">Guardar</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicFormWrapperComponent, isStandalone: true, selector: "ui-form-wrapper", inputs: { schema: "schema", externalData: "externalData", loading: "loading", disabled: "disabled", showButtons: "showButtons", fillSelects: "fillSelects", initialValues: "initialValues" }, outputs: { formSubmit: "formSubmit", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"handleSubmit()\">\r\n  @for (block of schema.blocks; track block.title) {\r\n    <section class=\"form-block\">\r\n      @if (block.title){\r\n          <div class=\"block-title\">{{ block.title }}</div>\r\n      }\r\n      @if (loading) {\r\n        <ui-skeleton-loader\r\n          [cols]=\"schema.cols\"\r\n          [inputs]=\"block.fields.length\"\r\n        ></ui-skeleton-loader>\r\n      } @else {\r\n        <ui-dynamic-form\r\n          [cols]=\"schema.cols\"\r\n          [fields]=\"block.fields\"\r\n          [form]=\"form\">\r\n        </ui-dynamic-form>\r\n      }\r\n    </section>\r\n  }\r\n  @if ( showButtons ) {\r\n\r\n    <div class=\"form-buttons\">\r\n      <ui-button color=\"black\" type=\"bordered\" (click)=\"clean()\">Limpiar</ui-button>\r\n      <ui-button color=\"black\" (click)=\"submit()\">Guardar</ui-button>\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;padding:.25rem 0}.block-title{font-size:1.625rem;font-weight:600;line-height:calc(1.625rem + 4px);margin:1.5rem 0;color:var(--grey-950)}.form-buttons{display:flex;gap:10px;width:100%}\n"], dependencies: [{ kind: "component", type: UicDynamicFormComponent, selector: "ui-dynamic-form", inputs: ["fields", "form", "disabled", "cols"] }, { kind: "component", type: UicSkeletonLoaderComponent, selector: "ui-skeleton-loader", inputs: ["inputs", "cols"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicFormWrapperComponent, decorators: [{
             type: Component,
@@ -2780,6 +2783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], showButtons: [{
                 type: Input
+            }], fillSelects: [{
+                type: Input
             }], initialValues: [{
                 type: Input
             }], formSubmit: [{
@@ -2897,7 +2902,7 @@ class UicStepsFormComponent {
         return this.currentIdx === this.steps.length - 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "showButtons", "initialValues"], outputs: ["formSubmit", "formChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicStepsFormComponent, isStandalone: true, selector: "ui-steps-form", inputs: { steps: "steps", navigationEnabled: "navigationEnabled", showStepTitle: "showStepTitle", showButtons: "showButtons", buttonsColor: "buttonsColor" }, outputs: { formSubmit: "formSubmit" }, viewQueries: [{ propertyName: "allForms", predicate: UicFormWrapperComponent, descendants: true }], ngImport: i0, template: "<ui-step-tabs \r\n    [(currentTab)]=\"currentTabTitle\" \r\n    [navigationEnabled]=\"navigationEnabled\"\r\n    [showStepTitle]=\"showStepTitle\"\r\n    [tabs]=\"tabs\"></ui-step-tabs>\r\n\r\n\r\n<!-- formulario -->\r\n@for (step of steps; track $index) {\r\n    <div [class.hidden-form]=\"step.title!==currentTabTitle\" >\r\n        <ui-form-wrapper [schema]=\"step.form\" \r\n            [externalData]=\"externalData\"\r\n            [disabled]=\"formDisabled\"\r\n            [loading]=\"loading\"></ui-form-wrapper>\r\n    </div>\r\n}\r\n\r\n@if (showButtons) {\r\n    <div style=\"display: flex; gap: 10px;\">\r\n        <ui-button [color]=\"buttonsColor\" type=\"bordered\" [disabled]=\"isFirst\" (click)=\"back()\" >Volver</ui-button>\r\n        <ui-button [color]=\"buttonsColor\" (click)=\"next()\">{{isLast?'Enviar':'Siguiente'}}</ui-button>\r\n    </div>\r\n}", styles: [".hidden-form{display:none}\n"], dependencies: [{ kind: "component", type: UicStepTabsComponent, selector: "ui-step-tabs", inputs: ["tabs", "currentTab", "navigationEnabled", "showStepTitle"], outputs: ["currentTabChange"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicFormWrapperComponent, selector: "ui-form-wrapper", inputs: ["schema", "externalData", "loading", "disabled", "showButtons", "fillSelects", "initialValues"], outputs: ["formSubmit", "formChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStepsFormComponent, decorators: [{
             type: Component,
@@ -3256,11 +3261,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=\"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 tip=\"Buscar\" [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 tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { 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    <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 tip=\"Buscar\" [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 tip=\"Limpiar\" [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: 399px){.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: 399px){.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: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { 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=\"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 tip=\"Buscar\" [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 tip=\"Limpiar\" [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 399px){.searcher{margin-bottom:16px}}.searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 399px){.searcher .fakeinput{width:100%}}.searcher .fakeinput i{font-size:24px;margin-right:8px}.searcher .fakeinput input{width:100%;border:none}.searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
+            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 tip=\"Buscar\" [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 tip=\"Limpiar\" [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: 399px){.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: 399px){.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: [{
@@ -3319,11 +3324,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" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap: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" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n    <ui-button [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </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 }] });
 }
 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 [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;justify-content:space-between;width:100%;gap: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 [disabled]=\"loading || currentPage == 1\" (click)=\"changePage(currentPage - 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Anterior\" icon=\"ri-arrow-left-line\" > </ui-button>    \r\n    <div class=\"table-numbers\">\r\n        @for (p of pages; track $index) {\r\n            @if ( p!= '...' ){\r\n                <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n            } @else {\r\n                <div class=\"space\">...</div>\r\n            }\r\n        \r\n        }\r\n    </div>\r\n    <ui-button [disabled]=\"loading || currentPage == totalPages\" (click)=\"changePage(currentPage + 1)\" [size]=\"buttonSize\" color=\"black\" type=\"bordered\" text=\"Siguiente\" rightIcon=\"ri-arrow-right-line\" > </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"] }]
         }], propDecorators: { buttonSize: [{
                 type: Input
             }], currentPage: [{
@@ -3413,14 +3418,17 @@ const animatedRow = trigger('animatedRow', [
 
 class UicStatusLabelComponent {
     color = 'grey';
+    type = 'status';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicStatusLabelComponent, isStandalone: true, selector: "ui-status-label", inputs: { color: "color" }, ngImport: i0, template: "<div [class]=\"'status-label slc-' +color \" >\r\n    <i class=\"ri-circle-fill\"></i>\r\n    <div class=\"grey-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;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)}.grey-text{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" }, 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"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicStatusLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-status-label', imports: [], template: "<div [class]=\"'status-label slc-' +color \" >\r\n    <i class=\"ri-circle-fill\"></i>\r\n    <div class=\"grey-text\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".status-label{display:flex;align-items:center;border-radius:6px;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)}.grey-text{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=\"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"] }]
         }], propDecorators: { color: [{
                 type: Input
+            }], type: [{
+                type: Input
             }] } });
 
 class UicActionButtonComponent {
@@ -3536,12 +3544,16 @@ class UicTableComponent {
     highlightedId = 0;
     headerText = '';
     totalItems = 0;
+    alignment = 'center';
     searchEnabled = true;
     searchLabel = 'Buscar';
     searchPlaceholder = 'Buscar';
+    headerClass = '';
+    headerBackgroundColor = 'grey';
     striped = false;
     showPagination = true;
     showEmptyMessage = true;
+    showSearchButton = false;
     emptyMessage = 'No hay elementos';
     searcherShowButtonText = false;
     action = new EventEmitter();
@@ -3564,7 +3576,7 @@ class UicTableComponent {
     }
     getFontColor(data, key) {
         const col = data.find(col => col.key == key);
-        return 'trc-' + (col?.textColor ?? 'black');
+        return 'ui-trc-' + (col?.textColor ?? 'black');
     }
     getBackgroundColor(data, key) {
         const col = data.find(col => col.key == key);
@@ -3583,7 +3595,7 @@ class UicTableComponent {
     getIcon(data, key) {
         const col = data.find(col => col.key == key);
         if (col && col.icon) {
-            return col.icon + ' trc-' + (col?.iconColor ?? 'black');
+            return col.icon + ' ui-trc-' + (col?.iconColor ?? 'black');
         }
         else {
             return null;
@@ -3665,14 +3677,14 @@ class UicTableComponent {
         this.checkedChange.emit([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher [showButtonText]=\"searcherShowButtonText\" (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">\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=\"sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div class=\"cell-content\" \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 + ' 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 [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 == 'actions') {         \r\n                                            <div class=\"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                                                            [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                                </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=\"empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.centered-cell-content{width:100%;display:flex;justify-content:center}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher [showSearchButton]=\"showSearchButton\" [showButtonText]=\"searcherShowButtonText\" (filter)=\"search($event)\" [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<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 [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 == '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                                                            [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                                </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            [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{text-align:center;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)}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)}.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}.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: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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,
             args: [{ selector: 'ui-table', imports: [CommonModule, UicButtonComponent,
                         UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
                         UicTableUicSearcherComponent, UicStatusLabelComponent,
-                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher [showButtonText]=\"searcherShowButtonText\" (filter)=\"search($event)\" [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n    }\r\n    <div class=\"filter-actions\">\r\n        <ng-content select=\"[actions]\"></ng-content>\r\n    </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">\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=\"sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'sort-active':header.key == sortKey}\">\r\n                                        <i  [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n                                    </div>\r\n                                }\r\n                            </div>\r\n                        </th>   \r\n                    }\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n\r\n                @if (loading) {\r\n                    @for (item of [].constructor(squeletonRows); track $index) {\r\n                        <tr class=\"\">\r\n                            @for (header of columns; track $index) {\r\n                                <td> <div class=\"row-loader\"></div> </td>\r\n                            }\r\n                        </tr>       \r\n                    }\r\n                } @else {\r\n                    @for (row of data; track row.id) {\r\n                        <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\"  [class.tr-highlighted]=\"row.highlighted\">\r\n                            @for (header of columns; track $index) {\r\n                                <!-- TIPOS DE HEADERS -->\r\n                                <td [class]=\"getFontColor(row.data,header.key)\">\r\n                                    <div class=\"cell-content\" \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 + ' 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 [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 == 'actions') {         \r\n                                            <div class=\"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                                                            [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                                </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=\"empty\">{{emptyMessage}} </div>\r\n                                </td>\r\n                            </tr>\r\n                        }\r\n                    }\r\n                }\r\n            </tbody>\r\n        </table>\r\n    </div>\r\n    \r\n    @if (showPagination) {\r\n        <uic-table-pagination \r\n            [loading]=\"loading\" \r\n            [totalPages]=\"pages\" \r\n            [size]=\"size\"\r\n            [buttonSize]=\"buttonSize\"\r\n            (sizeChange)=\"sizeChabge($event)\"\r\n            (pageChange)=\"pageChage($event)\">\r\n        </uic-table-pagination>\r\n    }\r\n</div>", styles: [".table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}table{width:100%;font-weight:400;border-collapse:collapse}table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500;color:var(--table-header-color);background-color:var(--table-header-background)}table th .th-wrap{white-space:nowrap;display:flex;align-items:center;justify-content:center}table th .th-wrap .sort-arrow{font-size:12px;line-height:12px}table th .th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}table th .th-wrap div:hover{color:var(--primary-500)}table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}table td,table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}table tr{transition:ease .3s}table tr:hover{background-color:var(--grey-50)}tbody tr:last-child td{border-bottom:none}.table-container{width:100%;overflow-x:auto}.table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.loader-tr{border-bottom:none!important}.loader-tr td{padding:0}.sort-active{color:var(--secondary-500)!important;border:solid 1px}.empty{text-align:center;color:var(--grey-300)}.table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.filter-actions{display:flex;gap:8px}.alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.tr-highlighted{border-left:solid 6px var(--green-500)}.centered-cell-content{width:100%;display:flex;justify-content:center}.trc-primary{color:var(--primary-500)}.trc-red{color:var(--red-500)}.trc-blue{color:var(--blue-500)}.trc-green{color:var(--green-500)}.trc-yellow{color:var(--yellow-500)}.trc-black{color:var(--grey-900)}.trc-grey{color:var(--grey-300)}.row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+                        UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"ui-table-filters\">\r\n    @if (searchEnabled) {\r\n        <uic-table-searcher [showSearchButton]=\"showSearchButton\" [showButtonText]=\"searcherShowButtonText\" (filter)=\"search($event)\" [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<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 [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 == '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                                                            [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                                </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            [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{text-align:center;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)}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)}.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}.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"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -3693,18 +3705,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], totalItems: [{
                 type: Input
+            }], alignment: [{
+                type: Input
             }], searchEnabled: [{
                 type: Input
             }], searchLabel: [{
                 type: Input
             }], searchPlaceholder: [{
                 type: Input
+            }], headerClass: [{
+                type: Input
+            }], headerBackgroundColor: [{
+                type: Input
             }], striped: [{
                 type: Input
             }], showPagination: [{
                 type: Input
             }], showEmptyMessage: [{
                 type: Input
+            }], showSearchButton: [{
+                type: Input
             }], emptyMessage: [{
                 type: Input
             }], searcherShowButtonText: [{
@@ -3862,6 +3882,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class UicPortletCardComponent {
+    data = [];
+    /** Layout mode: horizontal keeps label/value in a row; vertical stacks label over value. */
+    layout = 'horizontal';
+    /** Columns for vertical grid layout. */
+    cols = 1;
+    get gridTemplateColumns() {
+        if (this.layout !== 'vertical') {
+            return null;
+        }
+        const columns = Math.max(1, Math.floor(this.cols || 1));
+        return `repeat(${columns}, minmax(0, 1fr))`;
+    }
+    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: { data: "data", layout: "layout", cols: "cols" }, ngImport: i0, template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n    @for (item of data; track $index) {\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n            <div class=\"portlet-row-label\">{{item.label}}</div>\n            <div class=\"portlet-row-value\">\n                @if (item.icon) {\n                    <i [class]=\"item.icon\"></i>\n                }\n                @if (item.type == 'text') {\n                    <div class=\"p-type-text\">\n                        {{item.value}} \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>\n", styles: [".portlet-vertical{display:grid;gap:12px}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem;padding:8px 0}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}.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}\n"], dependencies: [{ kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-portlet-card', imports: [
+                        UicStatusLabelComponent,
+                        CurrencyPipe,
+                        DatePipe
+                    ], template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n    @for (item of data; track $index) {\n        <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n            <div class=\"portlet-row-label\">{{item.label}}</div>\n            <div class=\"portlet-row-value\">\n                @if (item.icon) {\n                    <i [class]=\"item.icon\"></i>\n                }\n                @if (item.type == 'text') {\n                    <div class=\"p-type-text\">\n                        {{item.value}} \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>\n", styles: [".portlet-vertical{display:grid;gap:12px}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem;padding:8px 0}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 0}.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}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }] } });
+
+class UicTabsButtonComponent {
+    tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'];
+    activeTab = 'Tab 2';
+    activeTabChange = new EventEmitter();
+    selectTab(tab) {
+        this.activeTab = tab;
+        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)\" [class.active-tab]=\"tab == activeTab\" class=\"tab\"> <i class=\"ri-bard-line\"></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"] });
+}
+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)\" [class.active-tab]=\"tab == activeTab\" class=\"tab\"> <i class=\"ri-bard-line\"></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"] }]
+        }], propDecorators: { tabs: [{
+                type: Input
+            }], activeTab: [{
+                type: Input
+            }], activeTabChange: [{
+                type: Output
+            }] } });
+
 const pushTop = trigger('pushTop', [
     transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
@@ -4183,11 +4256,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+// Mapea datos a tablas (deben tener el mismo nombre)
+function helperTableMapDatoToColums(data, headers) {
+    const row = [];
+    headers.forEach(head => {
+        if (head.key in data && head.type == 'text') {
+            row.push({
+                key: head.key,
+                value: data[head.key]
+            });
+        }
+    });
+    return row;
+}
+// MAPEA EL RESULTADO DE UN FORMULARIO AL DTO
+function helperFormMapFormdataToObject(formData, defaults) {
+    return {
+        ...defaults,
+        ...Object.fromEntries(Object.keys(defaults)
+            .filter(key => key in formData)
+            .map(key => [key, formData[key]]))
+    };
+}
+
 // COMPONENTS
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DROPDOWN_OVERLAY_CONTROLS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+export { DROPDOWN_OVERLAY_CONTROLS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map