ui-core-abv 0.1.91 → 0.1.93

package/fesm2022/ui-core-abv.mjs

@@ -1,13 +1,14 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Directive, forwardRef, inject, ViewContainerRef, ElementRef, ViewChild, HostListener, ViewChildren, DestroyRef, TemplateRef, ContentChild, createComponent, Pipe, Injectable, Injector, Inject, EnvironmentInjector } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/cdk/portal';
 import { TemplatePortal, ComponentPortal, PortalModule, CdkPortalOutlet } from '@angular/cdk/portal';
 import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, finalize, takeUntil } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, transition, style, animate, state, keyframes } from '@angular/animations';
 
 class UicButtonComponent {
@@ -2673,6 +2674,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_POSITIONS = [
+    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+    { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+    { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+];
+class UicDropdownContainerComponent {
+    _disabled = false;
+    buttonLabel = 'Abrir';
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (value) {
+            this.close();
+        }
+    }
+    positions = DEFAULT_POSITIONS;
+    matchTriggerWidth = true;
+    width;
+    minWidth;
+    maxWidth;
+    panelClass;
+    backdropClass = 'cdk-overlay-transparent-backdrop';
+    hasBackdrop = true;
+    closeOnBackdropClick = true;
+    closeOnEscape = true;
+    closeOnContentClick = false;
+    offsetX = 0;
+    offsetY = 4;
+    push = false;
+    flexibleDimensions = true;
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    triggerButton;
+    contentTemplate;
+    projectedTemplate;
+    overlayRef;
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    get isOpen() {
+        return !!this.overlayRef;
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    open() {
+        if (this.disabled || this.overlayRef) {
+            return;
+        }
+        if (!this.triggerButton || !this.contentTemplate) {
+            console.warn('ui-dropdown-container: Falta definir contenido para el dropdown.');
+            return;
+        }
+        const origin = this.triggerButton.nativeElement;
+        const positionStrategy = this.createPositionStrategy(origin);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            hasBackdrop: this.hasBackdrop,
+            backdropClass: this.backdropClass,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: this.panelClass,
+            width: this.resolveDimension(this.width, this.matchTriggerWidth ? origin.getBoundingClientRect().width : undefined),
+            minWidth: this.resolveDimension(this.minWidth),
+            maxWidth: this.resolveDimension(this.maxWidth),
+        });
+        const portal = new TemplatePortal(this.contentTemplate, this.vcr);
+        this.overlayRef.attach(portal);
+        this.attachOverlayListeners();
+        this.opened.emit();
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.destroyOverlay();
+        this.closed.emit();
+    }
+    toggle() {
+        if (this.overlayRef) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    onTriggerClick(event) {
+        if (this.disabled && !this.isOpen) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    }
+    createPositionStrategy(origin) {
+        return this.overlay.position()
+            .flexibleConnectedTo(origin)
+            .withPositions(this.positions)
+            .withPush(this.push)
+            .withFlexibleDimensions(this.flexibleDimensions)
+            .withDefaultOffsetX(this.offsetX)
+            .withDefaultOffsetY(this.offsetY);
+    }
+    attachOverlayListeners() {
+        if (!this.overlayRef)
+            return;
+        if (this.hasBackdrop && this.closeOnBackdropClick) {
+            this.overlayRef.backdropClick()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.close());
+        }
+        if (this.closeOnEscape) {
+            this.overlayRef.keydownEvents()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    this.close();
+                }
+            });
+        }
+        if (this.closeOnContentClick) {
+            const element = this.overlayRef.overlayElement;
+            element.addEventListener('click', this.overlayContentClick, { once: true });
+        }
+    }
+    overlayContentClick = () => this.close();
+    destroyOverlay() {
+        if (!this.overlayRef)
+            return;
+        const element = this.overlayRef.overlayElement;
+        element.removeEventListener('click', this.overlayContentClick);
+        this.overlayRef.dispose();
+        this.overlayRef = undefined;
+    }
+    resolveDimension(value, fallback) {
+        if (value === undefined || value === null) {
+            return fallback;
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicDropdownContainerComponent, isStandalone: true, selector: "ui-dropdown-container", inputs: { buttonLabel: "buttonLabel", disabled: "disabled", positions: "positions", matchTriggerWidth: "matchTriggerWidth", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", panelClass: "panelClass", backdropClass: "backdropClass", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", closeOnEscape: "closeOnEscape", closeOnContentClick: "closeOnContentClick", offsetX: "offsetX", offsetY: "offsetY", push: "push", flexibleDimensions: "flexibleDimensions" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "triggerButton", first: true, predicate: ["triggerButton"], descendants: true, static: true }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "<ui-button\n  #triggerButton\n  class=\"ui-dropdown-button\"\n  [disabled]=\"disabled\"\n  (click)=\"onTriggerClick($event)\">\n  {{ buttonLabel }}\n</ui-button>\n\n<ng-template #contentTemplate>\n  <div class=\"ui-dropdown-panel\">\n    <ng-container *ngIf=\"projectedTemplate; else defaultProjection\">\n      <ng-container *ngTemplateOutlet=\"projectedTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultProjection>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}.ui-dropdown-panel{background-color:#fff;box-shadow:0 16px 40px #0f172a24;border-radius:.75rem;margin:0;padding:0;overflow:hidden}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dropdown-container', imports: [UicButtonComponent, CommonModule], template: "<ui-button\n  #triggerButton\n  class=\"ui-dropdown-button\"\n  [disabled]=\"disabled\"\n  (click)=\"onTriggerClick($event)\">\n  {{ buttonLabel }}\n</ui-button>\n\n<ng-template #contentTemplate>\n  <div class=\"ui-dropdown-panel\">\n    <ng-container *ngIf=\"projectedTemplate; else defaultProjection\">\n      <ng-container *ngTemplateOutlet=\"projectedTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultProjection>\n      <ng-content></ng-content>\n    </ng-template>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}.ui-dropdown-panel{background-color:#fff;box-shadow:0 16px 40px #0f172a24;border-radius:.75rem;margin:0;padding:0;overflow:hidden}\n"] }]
+        }], propDecorators: { buttonLabel: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], positions: [{
+                type: Input
+            }], matchTriggerWidth: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], closeOnContentClick: [{
+                type: Input
+            }], offsetX: [{
+                type: Input
+            }], offsetY: [{
+                type: Input
+            }], push: [{
+                type: Input
+            }], flexibleDimensions: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], triggerButton: [{
+                type: ViewChild,
+                args: ['triggerButton', { static: true }]
+            }], contentTemplate: [{
+                type: ViewChild,
+                args: ['contentTemplate', { static: true }]
+            }], projectedTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }] } });
+
 const fadeAndRise = trigger('fadeAndRise', [
     transition(':enter', [style({ opacity: 0, maxHeight: '0px' }), animate('.3s ease', style({ opacity: 1, maxHeight: '200px' }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
@@ -2826,6 +3024,7 @@ class UicTablePaginationComponent {
         return pages;
     }
     changePage(newPage) {
+        console.log(newPage);
         if (newPage >= 1 && newPage <= this.totalPages && newPage !== this.currentPage) {
             this.currentPage = newPage;
             this.pageChange.emit(this.currentPage);
@@ -2894,11 +3093,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicTableUserComponent {
     user;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUserComponent, isStandalone: true, selector: "uic-table-user", inputs: { user: "user" }, ngImport: i0, template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo  +')' :'' \">\r\n            {{ !user.photo?  (user.name | nameInitials) :''}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "pipe", type: UicNameInitsPipe, name: "nameInitials" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\">\r\n            {{user.name | nameInitials}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
+            args: [{ selector: 'uic-table-user', imports: [UicNameInitsPipe], template: "@if (user) {\r\n    <div class=\"user-row\">\r\n        <div class=\"user-inits\" [style]=\"user.photo? 'background-image: url('+ user.photo  +')' :'' \">\r\n            {{ !user.photo?  (user.name | nameInitials) :''}}\r\n        </div>\r\n        <div class=\"user-row-data\">\r\n            <div>{{user.name}}</div>\r\n            <p>{{user.id}}</p>\r\n        </div>\r\n    </div>\r\n}@else{\r\n    -\r\n}", styles: [".user-inits{width:32px;height:32px;border-radius:50px;border:solid 1px var(--secondary-600);background-color:var(--secondary-300);color:var(--secondary-600);display:flex;justify-content:center;align-items:center;margin-right:6px;background-repeat:no-repeat;background-size:cover;background-position:top center}.user-row{display:flex;align-items:center;width:fit-content}.user-row-data{min-width:150px;flex:1 1;font-weight:600;text-align:left;color:var(--grey-900);font-size:.875rem;line-height:1rem}.user-row-data p{color:var(--grey-500);font-weight:400;margin-bottom:0;font-size:.75rem;line-height:1rem}\n"] }]
         }], propDecorators: { user: [{
                 type: Input
             }] } });
@@ -3176,14 +3375,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<div>\r\n    <ng-content select=\"[filters]\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">\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                                            @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||[])\"></ui-action-button>\r\n                                                }\r\n                                            }\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)}.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", 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||[])\"></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] });
 }
 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<div>\r\n    <ng-content select=\"[filters]\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    @if (headerText) {\r\n        <div class=\"table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n    }\r\n    <div class=\"table-container\">    \r\n        <table [class.striped]=\"striped\">\r\n            <thead>\r\n                <tr>\r\n                    @for (header of columns; track $index) {\r\n                        <th>\r\n                            <div class=\"th-wrap\">\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                                            @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||[])\"></ui-action-button>\r\n                                                }\r\n                                            }\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)}.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=\"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||[])\"></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"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
@@ -3274,6 +3473,7 @@ function createSuccessAlert(message, options) {
     return {
         id: nextId++,
         message,
+        icon: 'ri-check-line',
         type: 'success',
         duration: 3000,
         ...options,
@@ -3284,6 +3484,7 @@ function createErrorAlert(message, options) {
         id: nextId++,
         message,
         type: 'error',
+        icon: 'ri-error-warning-line',
         duration: 5000,
         ...options,
     };
@@ -3293,6 +3494,7 @@ function createWarningAlert(message, options) {
         id: nextId++,
         message,
         type: 'warning',
+        icon: 'ri-alarm-warning-line',
         duration: 4000,
         ...options,
     };
@@ -3301,6 +3503,7 @@ function createInfoAlert(message, options) {
     return {
         id: nextId++,
         message,
+        icon: 'ri-information-2-line',
         type: 'info',
         duration: 3000,
         ...options,
@@ -3684,5 +3887,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
+export { MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicModalService, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPushAlertService, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, highlightRow, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map